panelui-web 0.10.0 → 0.11.0

package/dist/components/dialog/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";
 /**
  * Dialog — a task taken out of the page and done in a box over it: renaming
  * something, inviting people, filling in a short form.
@@ -56,6 +56,8 @@ import { Dialog as Primitive } from '@base-ui/react/dialog';
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { Children, createContext, isValidElement, useContext, useEffect, useId, useMemo, 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 dialogVariants = 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',
@@ -82,7 +84,14 @@ const dialogVariants = tv({
         bodyContent: 'flex flex-col gap-4',
         scrollbar: 'my-2 me-1 flex w-1.5 opacity-0 transition-opacity delay-300 data-hovering:opacity-100 data-hovering:delay-0 data-scrolling:opacity-100 data-scrolling:delay-0',
         thumb: 'relative flex-1 rounded-full bg-foreground/20',
-        footer: 'flex shrink-0 items-center',
+        footer: [
+            'flex shrink-0 items-center',
+            // The footer sits on a tinted surface, and the secondary fill is a tint
+            // too, so the button all but disappears into it. There it takes the
+            // panel's own surface instead, which keeps it lighter than the band.
+            '*:data-[variant=secondary]:bg-popover *:data-[variant=secondary]:shadow-xs',
+            '*:data-[variant=secondary]:hover:not-disabled:bg-[color-mix(in_oklab,var(--popover),var(--foreground)_5%)]',
+        ],
         close: [
             'absolute end-4 top-4 z-10 inline-flex size-8 cursor-pointer items-center justify-center rounded-full',
             'bg-muted text-muted-foreground outline-none transition-[background-color,color,scale] duration-150',
@@ -144,7 +153,7 @@ const dialogVariants = tv({
     defaultVariants: { variant: 'inset', size: 'md' },
 });
 const DialogContext = createContext({ inline: false, showClose: true, variant: 'inset' });
-function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible = true, }) {
+function DialogRoot({ children, open, defaultOpen, onOpenChange, dismissible = true }) {
     return (_jsx(Primitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange ? (next) => onOpenChange(next) : undefined, disablePointerDismissal: !dismissible, children: children }));
 }
 DialogRoot.displayName = 'Dialog';
@@ -170,10 +179,18 @@ function DialogContent({ variant = 'inset', size = 'md', showClose = true, blur
 }
 DialogContent.displayName = 'Dialog.Content';
 /** The heading block. It leaves room for the close button beside the title. */
-function DialogHeader({ title, description, className, children, ...props }) {
+function DialogHeader({ title, description, className, children, render, ...props }) {
     const { showClose, variant } = useContext(DialogContext);
     const slots = dialogVariants({ variant });
-    return (_jsxs("div", { "data-slot": "dialog-header", className: slots.header({ className: [showClose && 'pe-14', className] }), ...props, children: [title !== undefined ? _jsx(DialogTitle, { children: title }) : null, description !== undefined ? _jsx(DialogDescription, { children: description }) : null, children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'dialog-header',
+            className: slots.header({ className: [showClose && 'pe-14', className] }),
+            children: (_jsxs(_Fragment, { children: [title !== undefined ? _jsx(DialogTitle, { children: title }) : null, description !== undefined ? _jsx(DialogDescription, { children: description }) : null, children] })),
+        }, props),
+    });
 }
 DialogHeader.displayName = 'Dialog.Header';
 /** The dialog's name, announced when it opens. */
@@ -191,7 +208,7 @@ function DialogDescription({ className, ...props }) {
     const slots = dialogVariants();
     if (inline)
         return _jsx("p", { "data-slot": "dialog-description", className: slots.description({ className }), ...props });
-    return _jsx(Primitive.Description, { "data-slot": "dialog-description", className: slots.description({ className }), ...props });
+    return (_jsx(Primitive.Description, { "data-slot": "dialog-description", className: slots.description({ className }), ...props }));
 }
 DialogDescription.displayName = 'Dialog.Description';
 /**
@@ -209,9 +226,13 @@ DialogBody.displayName = 'Dialog.Body';
  * equal pills; in `plain` they sit at the end of a ruled strip. Keep it a
  * direct child of `Dialog.Content`, so the band can find it.
  */
-function DialogFooter({ className, ...props }) {
+function DialogFooter({ className, render, ...props }) {
     const { variant } = useContext(DialogContext);
-    return _jsx("div", { "data-slot": "dialog-footer", className: dialogVariants({ variant }).footer({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'dialog-footer', className: dialogVariants({ variant }).footer({ className }) }, props),
+    });
 }
 DialogFooter.displayName = 'Dialog.Footer';
 /** Closes the dialog. */
@@ -228,9 +249,11 @@ DialogClose.displayName = 'Dialog.Close';
  * A list of one-line choices in the body. The arrow keys, Home and End move
  * between its items, and it opens scrolled to the selected one.
  */
-function DialogList({ className, onKeyDown, children, ...props }) {
+function DialogList({ className, onKeyDown, children, render, ...props }) {
     const list = useRef(null);
-    const items = () => [...(list.current?.querySelectorAll('[data-slot=dialog-list-item]:not([aria-disabled=true])') ?? [])];
+    const items = () => [
+        ...(list.current?.querySelectorAll('[data-slot=dialog-list-item]:not([aria-disabled=true])') ?? []),
+    ];
     useEffect(() => {
         const all = items();
         const selected = all.find((item) => item.dataset.selected !== undefined);
@@ -257,30 +280,66 @@ function DialogList({ className, onKeyDown, children, ...props }) {
         event.preventDefault();
         next.focus();
     };
-    return (_jsx("div", { ref: list, role: "listbox", "data-slot": "dialog-list", className: dialogVariants().list({ className }), onKeyDown: move, ...props, children: children }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: list,
+            role: 'listbox',
+            'data-slot': 'dialog-list',
+            className: dialogVariants().list({ className }),
+            onKeyDown: move,
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
 }
 DialogList.displayName = 'Dialog.List';
 /** A run of items in `Dialog.List` under a heading of their own. */
-function DialogListGroup({ label, className, children, ...props }) {
+function DialogListGroup({ label, className, children, render, ...props }) {
     const slots = dialogVariants();
     const id = useId();
-    return (_jsxs("div", { role: "group", "aria-labelledby": id, "data-slot": "dialog-list-group", className: slots.listGroup({ className }), ...props, children: [_jsx("div", { id: id, className: slots.listGroupLabel(), children: label }), children] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'group',
+            'aria-labelledby': id,
+            'data-slot': 'dialog-list-group',
+            className: slots.listGroup({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("div", { id: id, className: slots.listGroupLabel(), children: label }), children] })),
+        }, props),
+    });
 }
 DialogListGroup.displayName = 'Dialog.ListGroup';
 /** One choice in `Dialog.List`, on one line. */
-function DialogListItem({ selected = false, onSelect, meta, disabled = false, className, onClick, onKeyDown, children, ...props }) {
+function DialogListItem({ selected = false, onSelect, meta, disabled = false, className, onClick, onKeyDown, children, render, ...props }) {
     const slots = dialogVariants();
-    return (_jsxs("div", { role: "option", "aria-selected": selected, "aria-disabled": disabled || undefined, tabIndex: selected ? 0 : -1, "data-slot": "dialog-list-item", "data-selected": selected ? '' : undefined, className: slots.listItem({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!disabled)
-                onSelect?.();
-        }, onKeyDown: (event) => {
-            onKeyDown?.(event);
-            if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
-                event.preventDefault();
-                onSelect?.();
-            }
-        }, ...props, children: [_jsx("span", { className: slots.listItemLabel(), children: children }), meta !== undefined ? _jsx("span", { className: slots.listItemMeta(), children: meta }) : null, _jsx("span", { "aria-hidden": "true", className: slots.listItemCheck(), children: selected ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) })) : null })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'option',
+            'aria-selected': selected,
+            'aria-disabled': disabled || undefined,
+            tabIndex: selected ? 0 : -1,
+            'data-slot': 'dialog-list-item',
+            'data-selected': selected ? '' : undefined,
+            className: slots.listItem({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!disabled)
+                    onSelect?.();
+            },
+            onKeyDown: (event) => {
+                onKeyDown?.(event);
+                if ((event.key === 'Enter' || event.key === ' ') && !disabled) {
+                    event.preventDefault();
+                    onSelect?.();
+                }
+            },
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { className: slots.listItemLabel(), children: children }), meta !== undefined ? _jsx("span", { className: slots.listItemMeta(), children: meta }) : null, _jsx("span", { "aria-hidden": "true", className: slots.listItemCheck(), children: selected ? (_jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m5 12.5 4.5 4.5L19 7.5" }) })) : null })] })),
+        }, props),
+    });
 }
 DialogListItem.displayName = 'Dialog.ListItem';
 export const Dialog = Object.assign(DialogRoot, {

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

@@ -1,4 +1,11 @@
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type * as ReactTypes from 'react';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export interface FeedbackProps {
     children?: ReactNode;
     /** Whether the dialog is open, when the caller holds that. */
@@ -20,7 +27,7 @@ export interface FeedbackProps {
      */
     dismissible?: boolean;
 }
-declare function FeedbackRoot({ children, open, onOpenChange, defaultOpen, value, defaultValue, onValueChange, dismissible, }: FeedbackProps): import("react").JSX.Element;
+declare function FeedbackRoot({ children, open, onOpenChange, defaultOpen, value, defaultValue, onValueChange, dismissible, }: FeedbackProps): ReactTypes.JSX.Element;
 declare namespace FeedbackRoot {
     var displayName: string;
 }
@@ -33,7 +40,7 @@ export interface FeedbackTriggerProps extends Omit<ComponentProps<'button'>, 'ch
     render?: ReactElement;
 }
 /** What opens the dialog. A plain button unless `render` supplies one. */
-declare function FeedbackTrigger({ render, children, ...props }: FeedbackTriggerProps): import("react").JSX.Element;
+declare function FeedbackTrigger({ render, children, ...props }: FeedbackTriggerProps): ReactTypes.JSX.Element;
 declare namespace FeedbackTrigger {
     var displayName: string;
 }
@@ -50,21 +57,21 @@ export interface FeedbackContentProps extends Omit<ComponentProps<'div'>, 'child
     blur?: boolean;
 }
 /** The shell: the darker band, and everything set in it. */
-declare function FeedbackContent({ inline, blur, className, children, ...props }: FeedbackContentProps): import("react").JSX.Element;
+declare function FeedbackContent({ inline, blur, className, children, ...props }: FeedbackContentProps): ReactTypes.JSX.Element;
 declare namespace FeedbackContent {
     var displayName: string;
 }
 export interface FeedbackPanelProps extends ComponentProps<'div'> {
 }
 /** The well set into the shell: the title, the close button and the field. */
-declare function FeedbackPanel({ className, ...props }: FeedbackPanelProps): import("react").JSX.Element;
+declare function FeedbackPanel({ className, render, ...props }: FeedbackPanelProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackPanel {
     var displayName: string;
 }
 export interface FeedbackTitleProps extends ComponentProps<'h2'> {
 }
 /** The question. In a dialog it is also what the dialog is announced as. */
-declare function FeedbackTitle({ className, ...props }: FeedbackTitleProps): import("react").JSX.Element;
+declare function FeedbackTitle({ className, ...props }: FeedbackTitleProps): ReactTypes.JSX.Element;
 declare namespace FeedbackTitle {
     var displayName: string;
 }
@@ -73,7 +80,7 @@ export interface FeedbackCloseProps extends Omit<ComponentProps<'button'>, 'chil
     label?: string;
 }
 /** The ✕ in the panel's corner. */
-declare function FeedbackClose({ label, className, onClick, ...props }: FeedbackCloseProps): import("react").JSX.Element;
+declare function FeedbackClose({ label, className, onClick, render, ...props }: FeedbackCloseProps & RenderProp<'button'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackClose {
     var displayName: string;
 }
@@ -91,7 +98,7 @@ export interface FeedbackFieldProps extends Omit<ComponentProps<'textarea'>, 'va
  * What is being written. No border and no background of its own: it is
  * already inside a well.
  */
-declare function FeedbackField({ value, onValueChange, minHeight, maxHeight, className, style, onKeyDown, ref, 'aria-label': ariaLabel, ...props }: FeedbackFieldProps): import("react").JSX.Element;
+declare function FeedbackField({ value, onValueChange, minHeight, maxHeight, className, style, onKeyDown, ref, 'aria-label': ariaLabel, ...props }: FeedbackFieldProps): ReactTypes.JSX.Element;
 declare namespace FeedbackField {
     var displayName: string;
 }
@@ -101,7 +108,7 @@ export interface FeedbackDescriptionProps extends ComponentProps<'p'> {
  * Body text in the panel, in place of the field: a thank-you once the message
  * has gone. In a dialog it is also what the dialog is described as.
  */
-declare function FeedbackDescription({ className, ...props }: FeedbackDescriptionProps): import("react").JSX.Element;
+declare function FeedbackDescription({ className, ...props }: FeedbackDescriptionProps): ReactTypes.JSX.Element;
 declare namespace FeedbackDescription {
     var displayName: string;
 }
@@ -114,7 +121,7 @@ export interface FeedbackMessageProps extends ComponentProps<'p'> {
     tone?: 'muted' | 'destructive';
 }
 /** A short line under the field. Figures in it keep their width as they change. */
-declare function FeedbackMessage({ tone, className, ...props }: FeedbackMessageProps): import("react").JSX.Element;
+declare function FeedbackMessage({ tone, className, render, ...props }: FeedbackMessageProps & RenderProp<'p'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackMessage {
     var displayName: string;
 }
@@ -137,21 +144,21 @@ export interface FeedbackRatingProps extends Omit<ComponentProps<'div'>, 'childr
  * A row of round buttons, one per score, with a word under each end. Use it
  * as the first step of a dialog, and ask for the words once a score is in.
  */
-declare function FeedbackRating({ max, onValueChange, startLabel, endLabel, minHeight, className, style, ...props }: FeedbackRatingProps): import("react").JSX.Element;
+declare function FeedbackRating({ max, onValueChange, startLabel, endLabel, minHeight, className, style, render, ...props }: FeedbackRatingProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackRating {
     var displayName: string;
 }
 export interface FeedbackFooterProps extends ComponentProps<'div'> {
 }
 /** The action row, in the band under the panel. */
-declare function FeedbackFooter({ className, ...props }: FeedbackFooterProps): import("react").JSX.Element;
+declare function FeedbackFooter({ className, render, ...props }: FeedbackFooterProps & RenderProp<'div'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackFooter {
     var displayName: string;
 }
 export interface FeedbackActionProps extends ComponentProps<'button'> {
 }
 /** Discards and closes. Call `preventDefault` in `onClick` to keep it open. */
-declare function FeedbackCancel({ children, className, disabled, onClick, ...props }: FeedbackActionProps): import("react").JSX.Element;
+declare function FeedbackCancel({ children, className, disabled, onClick, render, ...props }: FeedbackActionProps & RenderProp<'button'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackCancel {
     var displayName: string;
 }
@@ -163,7 +170,7 @@ export interface FeedbackSubmitProps extends Omit<FeedbackActionProps, 'onSubmit
     onSubmit?: (value: string) => void;
 }
 /** Sends. Inert while the field is empty, unless `disabled` says otherwise. */
-declare function FeedbackSubmit({ children, className, disabled, onClick, onSubmit, ...props }: FeedbackSubmitProps): import("react").JSX.Element;
+declare function FeedbackSubmit({ children, className, disabled, onClick, onSubmit, render, ...props }: FeedbackSubmitProps & RenderProp<'button'>): ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FeedbackSubmit {
     var displayName: string;
 }

package/dist/components/feedback/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";
 /**
  * Feedback — a dialog whose body is something to write in, and whose actions
  * sit in a band around it.
@@ -47,6 +47,8 @@ import { Dialog } from '@base-ui/react/dialog';
 import { ScrollArea } from '@base-ui/react/scroll-area';
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const feedbackVariants = 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',
@@ -178,9 +180,13 @@ function FeedbackContent({ inline = false, blur = false, className, children, ..
 }
 FeedbackContent.displayName = 'Feedback.Content';
 /** The well set into the shell: the title, the close button and the field. */
-function FeedbackPanel({ className, ...props }) {
+function FeedbackPanel({ className, render, ...props }) {
     const slots = feedbackVariants();
-    return _jsx("div", { className: slots.panel({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: slots.panel({ className }) }, props),
+    });
 }
 FeedbackPanel.displayName = 'Feedback.Panel';
 /** The question. In a dialog it is also what the dialog is announced as. */
@@ -193,14 +199,24 @@ function FeedbackTitle({ className, ...props }) {
 }
 FeedbackTitle.displayName = 'Feedback.Title';
 /** The ✕ in the panel's corner. */
-function FeedbackClose({ label = 'Close', className, onClick, ...props }) {
+function FeedbackClose({ label = 'Close', className, onClick, render, ...props }) {
     const { setOpen } = useFeedback('Feedback.Close');
     const slots = feedbackVariants();
-    return (_jsx("button", { type: "button", "aria-label": label, className: slots.close({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                setOpen(false);
-        }, ...props, children: _jsx("svg", { viewBox: "0 0 10 10", "aria-hidden": "true", className: "size-2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "M2 2l6 6M8 2l-6 6" }) }) }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            'aria-label': label,
+            className: slots.close({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    setOpen(false);
+            },
+            children: (_jsx(_Fragment, { children: _jsx("svg", { viewBox: "0 0 10 10", "aria-hidden": "true", className: "size-2.5", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", children: _jsx("path", { d: "M2 2l6 6M8 2l-6 6" }) }) })),
+        }, props),
+    });
 }
 FeedbackClose.displayName = 'Feedback.Close';
 /**
@@ -258,39 +274,69 @@ function FeedbackDescription({ className, ...props }) {
 }
 FeedbackDescription.displayName = 'Feedback.Description';
 /** A short line under the field. Figures in it keep their width as they change. */
-function FeedbackMessage({ tone = 'muted', className, ...props }) {
+function FeedbackMessage({ tone = 'muted', className, render, ...props }) {
     const slots = feedbackVariants({ messageTone: tone });
-    return (_jsx("p", { role: tone === 'destructive' ? 'alert' : undefined, "aria-live": tone === 'destructive' ? undefined : 'polite', className: slots.message({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({
+            role: tone === 'destructive' ? 'alert' : undefined,
+            'aria-live': tone === 'destructive' ? undefined : 'polite',
+            className: slots.message({ className }),
+        }, props),
+    });
 }
 FeedbackMessage.displayName = 'Feedback.Message';
 /**
  * A row of round buttons, one per score, with a word under each end. Use it
  * as the first step of a dialog, and ask for the words once a score is in.
  */
-function FeedbackRating({ max = 5, onValueChange, startLabel, endLabel, minHeight, className, style, ...props }) {
+function FeedbackRating({ max = 5, onValueChange, startLabel, endLabel, minHeight, className, style, render, ...props }) {
     const slots = feedbackVariants();
-    return (_jsxs("div", { className: slots.rating({ className }), style: { minHeight, ...style }, ...props, children: [_jsx("div", { className: slots.ratingScores(), children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx("button", { type: "button", "aria-label": `${value} out of ${max}`, onClick: () => onValueChange?.(value), className: slots.ratingScore(), children: value }, value))) }), startLabel !== undefined || endLabel !== undefined ? (_jsxs("div", { className: slots.ratingEnds(), children: [_jsx("span", { children: startLabel }), _jsx("span", { children: endLabel })] })) : null] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            className: slots.rating({ className }),
+            style: { minHeight, ...style },
+            children: (_jsxs(_Fragment, { children: [_jsx("div", { className: slots.ratingScores(), children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx("button", { type: "button", "aria-label": `${value} out of ${max}`, onClick: () => onValueChange?.(value), className: slots.ratingScore(), children: value }, value))) }), startLabel !== undefined || endLabel !== undefined ? (_jsxs("div", { className: slots.ratingEnds(), children: [_jsx("span", { children: startLabel }), _jsx("span", { children: endLabel })] })) : null] })),
+        }, props),
+    });
 }
 FeedbackRating.displayName = 'Feedback.Rating';
 /** The action row, in the band under the panel. */
-function FeedbackFooter({ className, ...props }) {
+function FeedbackFooter({ className, render, ...props }) {
     const slots = feedbackVariants();
-    return _jsx("div", { className: slots.footer({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: slots.footer({ className }) }, props),
+    });
 }
 FeedbackFooter.displayName = 'Feedback.Footer';
 /** Discards and closes. Call `preventDefault` in `onClick` to keep it open. */
-function FeedbackCancel({ children = 'Cancel', className, disabled, onClick, ...props }) {
+function FeedbackCancel({ children = 'Cancel', className, disabled, onClick, render, ...props }) {
     const { setOpen } = useFeedback('Feedback.Cancel');
     const slots = feedbackVariants({ tone: 'cancel', disabled: !!disabled });
-    return (_jsx("button", { type: "button", disabled: disabled, className: slots.action({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                setOpen(false);
-        }, ...props, children: children }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            disabled: disabled,
+            className: slots.action({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    setOpen(false);
+            },
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
 }
 FeedbackCancel.displayName = 'Feedback.Cancel';
 /** Sends. Inert while the field is empty, unless `disabled` says otherwise. */
-function FeedbackSubmit({ children = 'Submit', className, disabled, onClick, onSubmit, ...props }) {
+function FeedbackSubmit({ children = 'Submit', className, disabled, onClick, onSubmit, render, ...props }) {
     const feedback = useFeedback('Feedback.Submit');
     // Empty feedback is worse than none: it is sent by somebody who believes
     // they said something.
@@ -299,11 +345,21 @@ function FeedbackSubmit({ children = 'Submit', className, disabled, onClick, onS
     // What the field's shortcut calls. Kept current on every render, so it
     // sends what is in the field now and not what was there when it mounted.
     feedback.submit.current = inert ? null : () => onSubmit?.(feedback.value);
-    return (_jsx("button", { type: "button", disabled: inert, className: slots.action({ className }), onClick: (event) => {
-            onClick?.(event);
-            if (!event.defaultPrevented)
-                onSubmit?.(feedback.value);
-        }, ...props, children: children }));
+    return useRender({
+        defaultTagName: 'button',
+        render,
+        props: mergeProps({
+            type: 'button',
+            disabled: inert,
+            className: slots.action({ className }),
+            onClick: (event) => {
+                onClick?.(event);
+                if (!event.defaultPrevented)
+                    onSubmit?.(feedback.value);
+            },
+            children: _jsx(_Fragment, { children: children }),
+        }, props),
+    });
 }
 FeedbackSubmit.displayName = 'Feedback.Submit';
 export const Feedback = Object.assign(FeedbackRoot, {

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

@@ -0,0 +1,85 @@
+/**
+ * Field — a form control with its label, a line of help, and the reason it was refused.
+ *
+ * ```tsx
+ * <Field name="email">
+ *   <Field.Label>Work email</Field.Label>
+ *   <Input type="email" required placeholder="you@company.com" />
+ *   <Field.Description>We send the receipt here.</Field.Description>
+ *   <Field.Error match="valueMissing">Enter an email address.</Field.Error>
+ * </Field>
+ * ```
+ *
+ * ## The ids are wired for you
+ *
+ * A label has to point at its control, and the control has to point at the
+ * help and the error, or a screen reader reads the field with no name and no
+ * reason. Field does that wiring: `Field.Label` is tied to the control inside
+ * the field, and the control is described by `Field.Description` and the
+ * error that is showing. Input, Textarea, Select, Checkbox, Radio Group and
+ * Switch all take part, with nothing passed.
+ *
+ * ## The label is a Label
+ *
+ * `Field.Label` is the Label component, so `required`, `optional`,
+ * `Label.Hint` and `Label.Action` work in it as they do anywhere else. It
+ * turns to the destructive colour and fades with the field, without
+ * `invalid` or `disabled` passed to it.
+ *
+ * ## Errors wait for the reader
+ *
+ * The browser's own checks — `required`, `type="email"`, `minLength` — run
+ * when the control is left, not on every key, so a field is not red while it
+ * is still being typed. `Field.Error` with `match` shows a message for one of
+ * those checks; with no `match`, it shows whenever the field is invalid,
+ * which is the one to use with `invalid` set from a server's answer. An
+ * error that appears slides in under the control, and the description it
+ * replaces steps aside.
+ */
+import { Field as BaseField } from '@base-ui/react/field';
+import { type LabelProps } from '../label/index.js';
+export interface FieldProps extends Omit<BaseField.Root.Props, 'className'> {
+    className?: string;
+}
+/**
+ * Groups a control with its label, help and error. Takes `name`, `invalid`
+ * (for an error from outside, such as a server), `disabled`, and `validate`
+ * for a check of your own.
+ */
+declare function FieldRoot({ className, ...props }: FieldProps): import("react").JSX.Element;
+declare namespace FieldRoot {
+    var displayName: string;
+}
+export interface FieldLabelProps extends Omit<LabelProps, 'invalid' | 'disabled' | 'htmlFor'> {
+}
+/** The control's name, tied to it. Takes `required` and `optional` as Label does, and its parts. */
+declare function FieldLabel({ required, optional, className, children, ...props }: FieldLabelProps): import("react").JSX.Element;
+declare namespace FieldLabel {
+    var displayName: string;
+}
+export interface FieldDescriptionProps extends Omit<BaseField.Description.Props, 'className'> {
+    className?: string;
+}
+/** A line of help under the control. Hidden while an error is showing. */
+declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+declare namespace FieldDescription {
+    var displayName: string;
+}
+export interface FieldErrorProps extends Omit<BaseField.Error.Props, 'className'> {
+    className?: string;
+}
+/**
+ * Why the value was refused. `match` names the check it is for, such as
+ * `valueMissing` or `typeMismatch`; with none, it shows whenever the field is
+ * invalid. With no children it shows the browser's own message.
+ */
+declare function FieldError({ className, ...props }: FieldErrorProps): import("react").JSX.Element;
+declare namespace FieldError {
+    var displayName: string;
+}
+export declare const Field: typeof FieldRoot & {
+    Label: typeof FieldLabel;
+    Description: typeof FieldDescription;
+    Error: typeof FieldError;
+};
+export { FieldLabel, FieldDescription, FieldError };