panelui-web 0.10.0 → 0.11.0

package/dist/components/field/index.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * 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 { tv } from 'tailwind-variants';
+import { Label } from '../label/index.js';
+const fieldVariants = tv({
+    slots: {
+        root: 'group/field flex w-full min-w-0 flex-col gap-2',
+        description: [
+            'text-xs leading-4 text-muted-foreground',
+            // An error showing says more than the help line, so the help steps aside.
+            'group-has-[[data-slot=field-error]]/field:hidden',
+        ],
+        error: [
+            'text-xs leading-4 text-destructive',
+            'transition-[opacity,translate] duration-200 starting:-translate-y-1 starting:opacity-0 motion-reduce:transition-none',
+        ],
+    },
+});
+/**
+ * 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.
+ */
+function FieldRoot({ className, ...props }) {
+    return _jsx(BaseField.Root, { "data-slot": "field", className: fieldVariants().root({ className }), ...props });
+}
+FieldRoot.displayName = 'Field';
+/** The control's name, tied to it. Takes `required` and `optional` as Label does, and its parts. */
+function FieldLabel({ required, optional, className, children, ...props }) {
+    return (_jsx(BaseField.Label, { "data-slot": "field-label", className: className, render: (labelProps) => _jsx(Label, { ...labelProps, required: required, optional: optional }), ...props, children: children }));
+}
+FieldLabel.displayName = 'Field.Label';
+/** A line of help under the control. Hidden while an error is showing. */
+function FieldDescription({ className, ...props }) {
+    return (_jsx(BaseField.Description, { "data-slot": "field-description", className: fieldVariants().description({ className }), ...props }));
+}
+FieldDescription.displayName = 'Field.Description';
+/**
+ * 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.
+ */
+function FieldError({ className, ...props }) {
+    return _jsx(BaseField.Error, { "data-slot": "field-error", className: fieldVariants().error({ className }), ...props });
+}
+FieldError.displayName = 'Field.Error';
+export const Field = Object.assign(FieldRoot, {
+    Label: FieldLabel,
+    Description: FieldDescription,
+    Error: FieldError,
+});
+export { FieldLabel, FieldDescription, FieldError };

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

@@ -46,6 +46,13 @@
  */
 import { type ComponentProps, type ReactNode } from 'react';
 import { type FlowPoint, type FlowRect, type FlowSide } from './flow-paths.js';
+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 FlowEdgeVariant = 'bezier' | 'smoothstep' | 'step' | 'straight';
 /** Which of the theme's roles an edge is drawn in. */
 export type FlowColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
@@ -103,7 +110,7 @@ export interface FlowProps extends Omit<ComponentProps<'div'>, 'children'> {
     label?: string;
     children?: ReactNode;
 }
-declare function FlowRoot({ defaultViewport, minZoom, maxZoom, panOnDrag, zoomOnPinch, fitViewOnMount, fitViewPadding, onViewportChange, onNodeDragEnd, onConnect, isValidConnection, label, className, children, onKeyDown, ...props }: FlowProps): import("react").JSX.Element;
+declare function FlowRoot({ defaultViewport, minZoom, maxZoom, panOnDrag, zoomOnPinch, fitViewOnMount, fitViewPadding, onViewportChange, onNodeDragEnd, onConnect, isValidConnection, label, className, children, onKeyDown, ...props }: FlowProps): ReactTypes.JSX.Element;
 declare namespace FlowRoot {
     var displayName: string;
 }
@@ -117,7 +124,7 @@ export interface FlowBackgroundProps {
     className?: string;
 }
 /** The pattern behind the graph, which moves and scales with it. */
-declare function FlowBackground({ variant, gap, size, className }: FlowBackgroundProps): import("react").ReactPortal | null;
+declare function FlowBackground({ variant, gap, size, className }: FlowBackgroundProps): ReactTypes.ReactPortal | null;
 declare namespace FlowBackground {
     var displayName: string;
 }
@@ -148,7 +155,7 @@ export interface FlowNodeProps extends Omit<ComponentProps<'div'>, 'id'> {
     moveStep?: number;
 }
 /** A box on the graph. Fill it with the node parts below, or with anything of your own. */
-declare function FlowNode({ id, position, draggable, confine, pinned, selected, onPress, onDelete, moveStep, className, style, children, ...props }: FlowNodeProps): import("react").JSX.Element;
+declare function FlowNode({ id, position, draggable, confine, pinned, selected, onPress, onDelete, moveStep, className, style, children, ...props }: FlowNodeProps): ReactTypes.JSX.Element;
 declare namespace FlowNode {
     var displayName: string;
 }
@@ -168,35 +175,35 @@ export interface FlowGroupProps extends Omit<FlowNodeProps, 'confine' | 'pinned'
  * A dashed box round a few things that belong together. It is a node like any
  * other: it is dragged as one, and an edge can be joined to it.
  */
-declare function FlowGroup({ id, position, draggable, selected: _selected, onPress, onDelete, moveStep, label, size, className, style, children, ...props }: FlowGroupProps): import("react").JSX.Element;
+declare function FlowGroup({ id, position, draggable, selected: _selected, onPress, onDelete, moveStep, label, size, className, style, children, ...props }: FlowGroupProps): ReactTypes.JSX.Element;
 declare namespace FlowGroup {
     var displayName: string;
 }
 export interface FlowNodeHeaderProps extends ComponentProps<'div'> {
 }
 /** A strip across the top of a node, ruled off from the rest: a step number and a state. */
-declare function FlowNodeHeader({ className, ...props }: FlowNodeHeaderProps): import("react").JSX.Element;
+declare function FlowNodeHeader({ className, render, ...props }: FlowNodeHeaderProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowNodeHeader {
     var displayName: string;
 }
 export interface FlowNodeContentProps extends ComponentProps<'div'> {
 }
 /** The body of a node, with the node's padding: a title over a description. */
-declare function FlowNodeContent({ className, ...props }: FlowNodeContentProps): import("react").JSX.Element;
+declare function FlowNodeContent({ className, render, ...props }: FlowNodeContentProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowNodeContent {
     var displayName: string;
 }
 export interface FlowNodeTitleProps extends ComponentProps<'p'> {
 }
 /** What the node is. */
-declare function FlowNodeTitle({ className, ...props }: FlowNodeTitleProps): import("react").JSX.Element;
+declare function FlowNodeTitle({ className, render, ...props }: FlowNodeTitleProps & RenderProp<'p'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowNodeTitle {
     var displayName: string;
 }
 export interface FlowNodeDescriptionProps extends ComponentProps<'p'> {
 }
 /** A quieter line about the node. Smaller inside a `Flow.GroupItem`. */
-declare function FlowNodeDescription({ className, ...props }: FlowNodeDescriptionProps): import("react").JSX.Element;
+declare function FlowNodeDescription({ className, render, ...props }: FlowNodeDescriptionProps & RenderProp<'p'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowNodeDescription {
     var displayName: string;
 }
@@ -205,7 +212,7 @@ export interface FlowNodeBadgeProps extends Omit<ComponentProps<'span'>, 'color'
     color?: FlowColor | 'muted';
 }
 /** A word in a pill, for a node's state: done, now, waiting. */
-declare function FlowNodeBadge({ color, className, ...props }: FlowNodeBadgeProps): import("react").JSX.Element;
+declare function FlowNodeBadge({ color, className, render, ...props }: FlowNodeBadgeProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowNodeBadge {
     var displayName: string;
 }
@@ -215,7 +222,7 @@ export interface FlowGroupItemProps extends ComponentProps<'div'> {
  * One thing inside a `Flow.Group` that is not a node of its own: an icon
  * beside a `Flow.NodeContent`. It moves with the group and edges cannot join it.
  */
-declare function FlowGroupItem({ className, ...props }: FlowGroupItemProps): import("react").JSX.Element;
+declare function FlowGroupItem({ className, render, ...props }: FlowGroupItemProps & RenderProp<'div'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowGroupItem {
     var displayName: string;
 }
@@ -228,7 +235,7 @@ export interface FlowHandleProps extends Omit<ComponentProps<'span'>, 'id'> {
     offset?: number;
 }
 /** A point on a node's edge that a connection can be drawn from, or dropped on. */
-declare function FlowHandle({ id, position, offset, className, style, ...props }: FlowHandleProps): import("react").JSX.Element;
+declare function FlowHandle({ id, position, offset, className, style, render, ...props }: FlowHandleProps & RenderProp<'span'>): ReactTypes.ReactElement<unknown, string | ReactTypes.JSXElementConstructor<any>>;
 declare namespace FlowHandle {
     var displayName: string;
 }
@@ -261,7 +268,7 @@ export interface FlowEdgeProps {
     curvature?: number;
 }
 /** A line from one node to another, which follows them as they move. */
-declare function FlowEdge({ from, to, variant, animated, dashed, color, width, arrow, fromSide, toSide, radius, gap, curvature, }: FlowEdgeProps): import("react").JSX.Element | null;
+declare function FlowEdge({ from, to, variant, animated, dashed, color, width, arrow, fromSide, toSide, radius, gap, curvature, }: FlowEdgeProps): ReactTypes.JSX.Element | null;
 declare namespace FlowEdge {
     var displayName: string;
 }
@@ -279,7 +286,7 @@ export interface FlowControlsProps extends Omit<ComponentProps<'div'>, 'children
     position?: FlowCorner;
 }
 /** Buttons for what a pinch and a drag do, for anyone without either. */
-declare function FlowControls({ zoom, fit, lock, step, position, className, ...props }: FlowControlsProps): import("react").ReactPortal | null;
+declare function FlowControls({ zoom, fit, lock, step, position, className, ...props }: FlowControlsProps): ReactTypes.ReactPortal | null;
 declare namespace FlowControls {
     var displayName: string;
 }
@@ -292,7 +299,7 @@ export interface FlowMiniMapProps extends Omit<ComponentProps<'div'>, 'children'
     position?: FlowCorner;
 }
 /** The whole graph, small, with the part in view marked on it. */
-declare function FlowMiniMap({ width, height, position, className, style, ...props }: FlowMiniMapProps): import("react").ReactPortal | null;
+declare function FlowMiniMap({ width, height, position, className, style, ...props }: FlowMiniMapProps): ReactTypes.ReactPortal | null;
 declare namespace FlowMiniMap {
     var displayName: string;
 }

package/dist/components/flow/index.js

@@ -50,6 +50,8 @@ import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffe
 import { createPortal } from 'react-dom';
 import { tv } from 'tailwind-variants';
 import { anchorOf, arrivalDirection, arrowHeadPath, autoSides, bezierPath, edgePath, } from './flow-paths.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const flowVariants = tv({
     slots: {
         root: 'relative h-96 w-full cursor-grab touch-none select-none overflow-hidden rounded-2xl border bg-background text-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing',
@@ -557,36 +559,60 @@ function FlowGroup({ id, position, draggable = true, selected: _selected, onPres
 }
 FlowGroup.displayName = 'Flow.Group';
 /** A strip across the top of a node, ruled off from the rest: a step number and a state. */
-function FlowNodeHeader({ className, ...props }) {
-    return _jsx("div", { "data-slot": "flow-node-header", className: flowVariants().nodeHeader({ className }), ...props });
+function FlowNodeHeader({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-node-header', className: flowVariants().nodeHeader({ className }) }, props),
+    });
 }
 FlowNodeHeader.displayName = 'Flow.NodeHeader';
 /** The body of a node, with the node's padding: a title over a description. */
-function FlowNodeContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "flow-node-content", className: flowVariants().nodeContent({ className }), ...props });
+function FlowNodeContent({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-node-content', className: flowVariants().nodeContent({ className }) }, props),
+    });
 }
 FlowNodeContent.displayName = 'Flow.NodeContent';
 /** What the node is. */
-function FlowNodeTitle({ className, ...props }) {
-    return _jsx("p", { "data-slot": "flow-node-title", className: flowVariants().nodeTitle({ className }), ...props });
+function FlowNodeTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-node-title', className: flowVariants().nodeTitle({ className }) }, props),
+    });
 }
 FlowNodeTitle.displayName = 'Flow.NodeTitle';
 /** A quieter line about the node. Smaller inside a `Flow.GroupItem`. */
-function FlowNodeDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "flow-node-description", className: flowVariants().nodeDescription({ className }), ...props }));
+function FlowNodeDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-node-description', className: flowVariants().nodeDescription({ className }) }, props),
+    });
 }
 FlowNodeDescription.displayName = 'Flow.NodeDescription';
 /** A word in a pill, for a node's state: done, now, waiting. */
-function FlowNodeBadge({ color = 'muted', className, ...props }) {
-    return (_jsx("span", { "data-slot": "flow-node-badge", className: flowVariants({ color }).nodeBadge({ className }), ...props }));
+function FlowNodeBadge({ color = 'muted', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-node-badge', className: flowVariants({ color }).nodeBadge({ className }) }, props),
+    });
 }
 FlowNodeBadge.displayName = 'Flow.NodeBadge';
 /**
  * One thing inside a `Flow.Group` that is not a node of its own: an icon
  * beside a `Flow.NodeContent`. It moves with the group and edges cannot join it.
  */
-function FlowGroupItem({ className, ...props }) {
-    return _jsx("div", { "data-slot": "flow-group-item", className: flowVariants().groupItem({ className }), ...props });
+function FlowGroupItem({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'flow-group-item', className: flowVariants().groupItem({ className }) }, props),
+    });
 }
 FlowGroupItem.displayName = 'Flow.GroupItem';
 const SIDE_STYLE = {
@@ -596,7 +622,7 @@ const SIDE_STYLE = {
     right: (offset) => ({ left: '100%', top: `${offset * 100}%` }),
 };
 /** A point on a node's edge that a connection can be drawn from, or dropped on. */
-function FlowHandle({ id, position = 'right', offset = 0.5, className, style, ...props }) {
+function FlowHandle({ id, position = 'right', offset = 0.5, className, style, render, ...props }) {
     const flow = useFlow('Flow.Handle');
     const node = useContext(NodeContext);
     if (node === null)
@@ -607,13 +633,23 @@ function FlowHandle({ id, position = 'right', offset = 0.5, className, style, ..
         setHandle(node, key, { id, side: position, offset });
         return () => setHandle(node, key, null);
     }, [node, id, position, offset, setHandle]);
-    return (_jsx("span", { "data-flow-handle": id ?? '', "aria-hidden": "true", className: flowVariants().handle({ className }), style: { ...SIDE_STYLE[position](offset), ...style }, onPointerDown: (event) => {
-            if (event.button !== 0)
-                return;
-            event.stopPropagation();
-            event.preventDefault();
-            connectFrom(node, { id, side: position, offset }, event);
-        }, ...props }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'data-flow-handle': id ?? '',
+            'aria-hidden': 'true',
+            className: flowVariants().handle({ className }),
+            style: { ...SIDE_STYLE[position](offset), ...style },
+            onPointerDown: (event) => {
+                if (event.button !== 0)
+                    return;
+                event.stopPropagation();
+                event.preventDefault();
+                connectFrom(node, { id, side: position, offset }, event);
+            },
+        }, props),
+    });
 }
 FlowHandle.displayName = 'Flow.Handle';
 /**

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

@@ -55,6 +55,12 @@
  * through context, so a frame has no client JavaScript of its own.
  */
 import type { ComponentProps, MouseEventHandler, 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 FrameVariant = 'default' | 'band' | 'inset' | 'plain';
 export interface FrameProps extends ComponentProps<'div'> {
     /**
@@ -67,7 +73,7 @@ export interface FrameProps extends ComponentProps<'div'> {
      */
     variant?: FrameVariant;
 }
-declare function FrameRoot({ variant, className, ...props }: FrameProps): import("react").JSX.Element;
+declare function FrameRoot({ variant, className, render, ...props }: FrameProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameRoot {
     var displayName: string;
 }
@@ -77,7 +83,7 @@ export interface FrameHeaderProps extends ComponentProps<'div'> {
  * The strip of shell above the panel: a title, an optional description under
  * it, and `Frame.Action` on the trailing side.
  */
-declare function FrameHeader({ className, ...props }: FrameHeaderProps): import("react").JSX.Element;
+declare function FrameHeader({ className, render, ...props }: FrameHeaderProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameHeader {
     var displayName: string;
 }
@@ -93,21 +99,21 @@ declare namespace FrameTitle {
 export interface FrameDescriptionProps extends ComponentProps<'p'> {
 }
 /** A line under a title, in the header or in a row. */
-declare function FrameDescription({ className, ...props }: FrameDescriptionProps): import("react").JSX.Element;
+declare function FrameDescription({ className, render, ...props }: FrameDescriptionProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameDescription {
     var displayName: string;
 }
 export interface FrameActionProps extends ComponentProps<'div'> {
 }
 /** The header's trailing side: a short status, a link, a small button. */
-declare function FrameAction({ className, ...props }: FrameActionProps): import("react").JSX.Element;
+declare function FrameAction({ className, render, ...props }: FrameActionProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameAction {
     var displayName: string;
 }
 export interface FramePanelProps extends ComponentProps<'div'> {
 }
 /** The card the rows sit on. It draws the hairline between its children, except under `band`. */
-declare function FramePanel({ className, ...props }: FramePanelProps): import("react").JSX.Element;
+declare function FramePanel({ className, render, ...props }: FramePanelProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FramePanel {
     var displayName: string;
 }
@@ -127,14 +133,14 @@ export interface FrameRowProps extends Omit<ComponentProps<'div'>, 'onClick'> {
  * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
  * side by side. With `href` it is a link and with `onClick` a button.
  */
-declare function FrameRow({ className, children, chevron, href, target, rel, ...props }: FrameRowProps): import("react").JSX.Element;
+declare function FrameRow({ className, children, chevron, href, target, rel, render, ...props }: FrameRowProps & RenderProp<'div'>): import("react").JSX.Element;
 declare namespace FrameRow {
     var displayName: string;
 }
 export interface FrameMediaProps extends ComponentProps<'div'> {
 }
 /** A row's leading icon, avatar or picture. Holds its size. */
-declare function FrameMedia({ className, ...props }: FrameMediaProps): import("react").JSX.Element;
+declare function FrameMedia({ className, render, ...props }: FrameMediaProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameMedia {
     var displayName: string;
 }
@@ -145,14 +151,14 @@ export interface FrameContentProps extends ComponentProps<'div'> {
  * what the media and actions leave and may shrink past its content, which is
  * what keeps a long line from pushing the rest of the row off the edge.
  */
-declare function FrameContent({ className, ...props }: FrameContentProps): import("react").JSX.Element;
+declare function FrameContent({ className, render, ...props }: FrameContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameContent {
     var displayName: string;
 }
 export interface FrameActionsProps extends ComponentProps<'div'> {
 }
 /** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
-declare function FrameActions({ className, ...props }: FrameActionsProps): import("react").JSX.Element;
+declare function FrameActions({ className, render, ...props }: FrameActionsProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameActions {
     var displayName: string;
 }
@@ -161,7 +167,7 @@ export interface FrameSectionProps extends Omit<ComponentProps<'section'>, 'titl
     title?: ReactNode;
 }
 /** A labelled group of rows, for a panel holding more than one. */
-declare function FrameSection({ title, className, children, ...props }: FrameSectionProps): import("react").JSX.Element;
+declare function FrameSection({ title, className, children, render, ...props }: FrameSectionProps & RenderProp<'section'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameSection {
     var displayName: string;
 }
@@ -171,7 +177,7 @@ export interface FrameFooterProps extends ComponentProps<'div'> {
  * The strip below the panel. Under `inset` its children become equal pills in
  * the recessed band, the shape a row of decisions takes.
  */
-declare function FrameFooter({ className, ...props }: FrameFooterProps): import("react").JSX.Element;
+declare function FrameFooter({ className, render, ...props }: FrameFooterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace FrameFooter {
     var displayName: string;
 }

package/dist/components/frame/index.js

@@ -1,5 +1,8 @@
+'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';
 /*
  * `inset` geometry. The panel's radius is the shell's less the shell's padding,
  * so the two curves are concentric — a panel radius that ignored the band
@@ -86,17 +89,25 @@ const frameVariants = tv({
     },
     defaultVariants: { variant: 'default' },
 });
-function FrameRoot({ variant = 'default', className, ...props }) {
+function FrameRoot({ variant = 'default', className, render, ...props }) {
     const slots = frameVariants({ variant });
-    return _jsx("div", { "data-slot": "frame", "data-variant": variant, className: slots.root({ className }), ...props });
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame', 'data-variant': variant, className: slots.root({ className }) }, props),
+    });
 }
 FrameRoot.displayName = 'Frame';
 /**
  * The strip of shell above the panel: a title, an optional description under
  * it, and `Frame.Action` on the trailing side.
  */
-function FrameHeader({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-header", className: frameVariants().header({ className }), ...props });
+function FrameHeader({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-header', className: frameVariants().header({ className }) }, props),
+    });
 }
 FrameHeader.displayName = 'Frame.Header';
 /** A caption in the header; the subject line inside `Frame.Content`. */
@@ -105,18 +116,30 @@ function FrameTitle({ as: Tag = 'h3', className, ...props }) {
 }
 FrameTitle.displayName = 'Frame.Title';
 /** A line under a title, in the header or in a row. */
-function FrameDescription({ className, ...props }) {
-    return (_jsx("p", { "data-slot": "frame-description", className: frameVariants().description({ className }), ...props }));
+function FrameDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-description', className: frameVariants().description({ className }) }, props),
+    });
 }
 FrameDescription.displayName = 'Frame.Description';
 /** The header's trailing side: a short status, a link, a small button. */
-function FrameAction({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-action", className: frameVariants().action({ className }), ...props });
+function FrameAction({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-action', className: frameVariants().action({ className }) }, props),
+    });
 }
 FrameAction.displayName = 'Frame.Action';
 /** The card the rows sit on. It draws the hairline between its children, except under `band`. */
-function FramePanel({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-panel", className: frameVariants().panel({ className }), ...props });
+function FramePanel({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-panel', className: frameVariants().panel({ className }) }, props),
+    });
 }
 FramePanel.displayName = 'Frame.Panel';
 const Chevron = ({ className }) => (_jsx("svg", { viewBox: "0 0 24 24", "aria-hidden": true, className: className, fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "m9 6 6 6-6 6" }) }));
@@ -124,7 +147,7 @@ const Chevron = ({ className }) => (_jsx("svg", { viewBox: "0 0 24 24", "aria-hi
  * One line of the panel: `Frame.Media`, `Frame.Content` and `Frame.Actions`
  * side by side. With `href` it is a link and with `onClick` a button.
  */
-function FrameRow({ className, children, chevron = false, href, target, rel, ...props }) {
+function FrameRow({ className, children, chevron = false, href, target, rel, render, ...props }) {
     const slots = frameVariants();
     const inside = (_jsxs(_Fragment, { children: [children, chevron ? _jsx(Chevron, { className: slots.chevron() }) : null] }));
     if (href !== undefined) {
@@ -134,12 +157,20 @@ function FrameRow({ className, children, chevron = false, href, target, rel, ...
     if (props.onClick !== undefined) {
         return (_jsx("button", { type: "button", "data-slot": "frame-row", className: slots.row({ className: [slots.rowPressable(), className] }), ...props, children: inside }));
     }
-    return (_jsx("div", { "data-slot": "frame-row", className: slots.row({ className }), ...props, children: inside }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-row', className: slots.row({ className }), children: _jsx(_Fragment, { children: inside }) }, props),
+    });
 }
 FrameRow.displayName = 'Frame.Row';
 /** A row's leading icon, avatar or picture. Holds its size. */
-function FrameMedia({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-media", className: frameVariants().media({ className }), ...props });
+function FrameMedia({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-media', className: frameVariants().media({ className }) }, props),
+    });
 }
 FrameMedia.displayName = 'Frame.Media';
 /**
@@ -147,27 +178,47 @@ FrameMedia.displayName = 'Frame.Media';
  * what the media and actions leave and may shrink past its content, which is
  * what keeps a long line from pushing the rest of the row off the edge.
  */
-function FrameContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-content", className: frameVariants().content({ className }), ...props });
+function FrameContent({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-content', className: frameVariants().content({ className }) }, props),
+    });
 }
 FrameContent.displayName = 'Frame.Content';
 /** A row's trailing side: a badge, a value, a switch, a small button. Holds its size. */
-function FrameActions({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-actions", className: frameVariants().actions({ className }), ...props });
+function FrameActions({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-actions', className: frameVariants().actions({ className }) }, props),
+    });
 }
 FrameActions.displayName = 'Frame.Actions';
 /** A labelled group of rows, for a panel holding more than one. */
-function FrameSection({ title, className, children, ...props }) {
+function FrameSection({ title, className, children, render, ...props }) {
     const slots = frameVariants();
-    return (_jsxs("section", { "data-slot": "frame-section", className: slots.section({ className }), ...props, children: [title !== undefined ? _jsx("h4", { className: slots.sectionTitle(), children: title }) : null, children] }));
+    return useRender({
+        defaultTagName: 'section',
+        render,
+        props: mergeProps({
+            'data-slot': 'frame-section',
+            className: slots.section({ className }),
+            children: (_jsxs(_Fragment, { children: [title !== undefined ? _jsx("h4", { className: slots.sectionTitle(), children: title }) : null, children] })),
+        }, props),
+    });
 }
 FrameSection.displayName = 'Frame.Section';
 /**
  * The strip below the panel. Under `inset` its children become equal pills in
  * the recessed band, the shape a row of decisions takes.
  */
-function FrameFooter({ className, ...props }) {
-    return _jsx("div", { "data-slot": "frame-footer", className: frameVariants().footer({ className }), ...props });
+function FrameFooter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'frame-footer', className: frameVariants().footer({ className }) }, props),
+    });
 }
 FrameFooter.displayName = 'Frame.Footer';
 export const Frame = Object.assign(FrameRoot, {