panelui-web 0.10.0 → 0.11.0

package/dist/components/bar-picker/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";
 /**
  * BarPicker — a short run of values as columns of lights, one column picked.
  *
@@ -27,8 +27,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * yours to show beside it, large: a column of eight lights cannot be read to
  * the unit, but one number can.
  */
-import { useEffect, useRef, useState, } from 'react';
+import { useEffect, 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 barPickerVariants = tv({
     slots: {
         root: 'flex w-full items-end gap-1.5',
@@ -68,7 +70,7 @@ const barPickerVariants = tv({
 });
 /** Milliseconds between one light of a column coming on and the next. */
 const STAGGER = 32;
-export function BarPicker({ data, max, value, defaultValue = 0, onValueChange, segments = 8, color = 'primary', formatValue = (bar) => String(bar), label = 'Values', className, ...props }) {
+export function BarPicker({ data, max, value, defaultValue = 0, onValueChange, segments = 8, color = 'primary', formatValue = (bar) => String(bar), label = 'Values', className, render, ...props }) {
     const slots = barPickerVariants({ color });
     const [internal, setInternal] = useState(defaultValue);
     const picked = clampIndex(value ?? internal, data.length);
@@ -107,29 +109,36 @@ export function BarPicker({ data, max, value, defaultValue = 0, onValueChange, s
         refs.current[next]?.focus();
         pick(next);
     };
-    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: slots.root({ className }), ...props, children: data.map((bar, index) => {
-            const selected = index === picked;
-            const part = barPickerVariants({ selected });
-            const name = bar.name ?? (typeof bar.label === 'string' ? bar.label : `Bar ${index + 1}`);
-            // How many lights the value reaches. Any value above zero lights at
-            // least one, so a small value is a mark and not an empty column.
-            const share = Math.min(1, Math.max(0, bar.value / ceiling));
-            const reached = !lit || bar.value <= 0 ? 0 : Math.max(1, Math.round(share * count));
-            return (_jsxs("button", { ref: (node) => {
-                    refs.current[index] = node;
-                }, type: "button", role: "radio", "aria-checked": selected, "aria-label": `${name}: ${formatValue(bar.value)}`, tabIndex: selected ? 0 : -1, onClick: () => pick(index), onKeyDown: (event) => onKeyDown(event, index), className: part.column(), children: [_jsx("span", { className: slots.stack(), children: Array.from({ length: count }, (_, level) => {
-                            const on = level < reached;
-                            const light = !on ? 'off' : !selected ? 'dim' : level === reached - 1 ? 'peak' : 'on';
-                            return (_jsx("span", { className: barPickerVariants({ light }).segment(), style: {
-                                    // Bottom first, so a column is seen filling upwards.
-                                    transitionDelay: on ? `${level * STAGGER}ms` : undefined,
-                                    // The picked column brightens towards its top.
-                                    opacity: light === 'on'
-                                        ? Number((0.5 + 0.5 * ((level + 1) / reached)).toFixed(3))
-                                        : undefined,
-                                } }, level));
-                        }) }), _jsx("span", { "aria-hidden": "true", className: part.label(), children: bar.label })] }, index));
-        }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'radiogroup',
+            'aria-label': label,
+            className: slots.root({ className }),
+            children: (_jsx(_Fragment, { children: data.map((bar, index) => {
+                    const selected = index === picked;
+                    const part = barPickerVariants({ selected });
+                    const name = bar.name ?? (typeof bar.label === 'string' ? bar.label : `Bar ${index + 1}`);
+                    // How many lights the value reaches. Any value above zero lights at
+                    // least one, so a small value is a mark and not an empty column.
+                    const share = Math.min(1, Math.max(0, bar.value / ceiling));
+                    const reached = !lit || bar.value <= 0 ? 0 : Math.max(1, Math.round(share * count));
+                    return (_jsxs("button", { ref: (node) => {
+                            refs.current[index] = node;
+                        }, type: "button", role: "radio", "aria-checked": selected, "aria-label": `${name}: ${formatValue(bar.value)}`, tabIndex: selected ? 0 : -1, onClick: () => pick(index), onKeyDown: (event) => onKeyDown(event, index), className: part.column(), children: [_jsx("span", { className: slots.stack(), children: Array.from({ length: count }, (_, level) => {
+                                    const on = level < reached;
+                                    const light = !on ? 'off' : !selected ? 'dim' : level === reached - 1 ? 'peak' : 'on';
+                                    return (_jsx("span", { className: barPickerVariants({ light }).segment(), style: {
+                                            // Bottom first, so a column is seen filling upwards.
+                                            transitionDelay: on ? `${level * STAGGER}ms` : undefined,
+                                            // The picked column brightens towards its top.
+                                            opacity: light === 'on' ? Number((0.5 + 0.5 * ((level + 1) / reached)).toFixed(3)) : undefined,
+                                        } }, level));
+                                }) }), _jsx("span", { "aria-hidden": "true", className: part.label(), children: bar.label })] }, index));
+                }) })),
+        }, props),
+    });
 }
 BarPicker.displayName = 'BarPicker';
 function clampIndex(index, length) {

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

@@ -20,76 +20,86 @@
  * `loading` sets a spinner over the label and stops presses. The label stays
  * in place, hidden, so the width does not change: a button that resizes as it
  * is pressed moves whatever sits beside it.
+ *
+ * ## A link that looks like a button
+ *
+ * An action that goes to another page is a link, whatever it looks like, so
+ * that it opens in a new tab and reads as a link to a screen reader. Pass the
+ * link as `render` and the button's look and behaviour are put on it:
+ * `<Button render={<a href="/" />}>Home</Button>`. The button is the headless
+ * button primitive underneath, so keyboard handling, `disabled` and focus work
+ * the same whatever it is drawn as.
  */
-import type { ComponentProps } from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type ComponentProps } from 'react';
 import { type VariantProps } from 'tailwind-variants';
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
-        default: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs inset-shadow-[0_1px_0_rgb(255_255_255/0.12)] hover:not-disabled:bg-primary/90";
+        secondary: "bg-secondary text-secondary-foreground hover:not-disabled:bg-secondary/80";
+        outline: "border bg-background text-foreground shadow-xs hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground dark:bg-input/30";
+        ghost: "text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground";
+        destructive: "bg-destructive text-white shadow-xs hover:not-disabled:bg-destructive/90 focus-visible:ring-destructive/40";
+        link: "text-foreground underline-offset-4 hover:underline";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
-        'icon-sm': string;
-        icon: string;
-        'icon-lg': string;
+        sm: "h-8 rounded-md px-3 text-[0.8125rem]";
+        md: "h-9 rounded-lg px-4 text-sm";
+        lg: "h-11 rounded-xl px-5 text-[0.9375rem]";
+        'icon-sm': "size-8 rounded-md";
+        icon: "size-9 rounded-lg";
+        'icon-lg': "size-11 rounded-xl [&_svg:not([class*=size-])]:size-5";
     };
     /** `pill` rounds the ends fully, whatever the size. */
     shape: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "rounded-full";
     };
 }, undefined, string[], {
     variant: {
-        default: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs inset-shadow-[0_1px_0_rgb(255_255_255/0.12)] hover:not-disabled:bg-primary/90";
+        secondary: "bg-secondary text-secondary-foreground hover:not-disabled:bg-secondary/80";
+        outline: "border bg-background text-foreground shadow-xs hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground dark:bg-input/30";
+        ghost: "text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground";
+        destructive: "bg-destructive text-white shadow-xs hover:not-disabled:bg-destructive/90 focus-visible:ring-destructive/40";
+        link: "text-foreground underline-offset-4 hover:underline";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
-        'icon-sm': string;
-        icon: string;
-        'icon-lg': string;
+        sm: "h-8 rounded-md px-3 text-[0.8125rem]";
+        md: "h-9 rounded-lg px-4 text-sm";
+        lg: "h-11 rounded-xl px-5 text-[0.9375rem]";
+        'icon-sm': "size-8 rounded-md";
+        icon: "size-9 rounded-lg";
+        'icon-lg': "size-11 rounded-xl [&_svg:not([class*=size-])]:size-5";
     };
     /** `pill` rounds the ends fully, whatever the size. */
     shape: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "rounded-full";
     };
-}, undefined, import("tailwind-variants").TVReturnType<{
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        default: string;
-        secondary: string;
-        outline: string;
-        ghost: string;
-        destructive: string;
-        link: string;
+        default: "bg-primary text-primary-foreground shadow-xs inset-shadow-[0_1px_0_rgb(255_255_255/0.12)] hover:not-disabled:bg-primary/90";
+        secondary: "bg-secondary text-secondary-foreground hover:not-disabled:bg-secondary/80";
+        outline: "border bg-background text-foreground shadow-xs hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground dark:bg-input/30";
+        ghost: "text-foreground hover:not-disabled:bg-accent hover:not-disabled:text-accent-foreground";
+        destructive: "bg-destructive text-white shadow-xs hover:not-disabled:bg-destructive/90 focus-visible:ring-destructive/40";
+        link: "text-foreground underline-offset-4 hover:underline";
     };
     size: {
-        sm: string;
-        md: string;
-        lg: string;
-        'icon-sm': string;
-        icon: string;
-        'icon-lg': string;
+        sm: "h-8 rounded-md px-3 text-[0.8125rem]";
+        md: "h-9 rounded-lg px-4 text-sm";
+        lg: "h-11 rounded-xl px-5 text-[0.9375rem]";
+        'icon-sm': "size-8 rounded-md";
+        icon: "size-9 rounded-lg";
+        'icon-lg': "size-11 rounded-xl [&_svg:not([class*=size-])]:size-5";
     };
     /** `pill` rounds the ends fully, whatever the size. */
     shape: {
-        default: string;
-        pill: string;
+        default: "";
+        pill: "rounded-full";
     };
-}, undefined, string[], unknown, unknown, undefined>>;
+}, undefined>>;
 export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>['variant']>;
 export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>['size']>;
 export interface ButtonProps extends ComponentProps<'button'> {
@@ -101,9 +111,21 @@ export interface ButtonProps extends ComponentProps<'button'> {
     shape?: 'default' | 'pill';
     /** Shows a spinner over the label, sets `aria-busy` and stops presses, keeping the width. */
     loading?: boolean;
+    /**
+     * An element to draw the button as, such as `<a href="/" />` or a router's
+     * link, or a function of the props and state that returns one. It takes the
+     * button's classes, children, ref and event handlers. A link stays a link: it
+     * is not given `type`, and Space does not press it.
+     */
+    render?: BaseButton.Props['render'];
+    /**
+     * Whether `render` draws a native `<button>`. Set automatically for an
+     * element; pass it when `render` is a function that returns something else.
+     */
+    nativeButton?: boolean;
 }
 /** A button. Every attribute of `<button>` passes through. */
-declare function ButtonRoot({ variant, size, shape, loading, disabled, type, className, children, ...props }: ButtonProps): import("react").JSX.Element;
+declare function ButtonRoot({ variant, size, shape, loading, disabled, type, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
 declare namespace ButtonRoot {
     var displayName: string;
 }

package/dist/components/button/index.js

@@ -1,4 +1,38 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Button — something to press, in the weight its action deserves.
+ *
+ * ```tsx
+ * <Button>Save</Button>
+ * <Button variant="outline" size="sm">Cancel</Button>
+ * <Button variant="ghost" size="icon" aria-label="Close"><XIcon /></Button>
+ * <Button loading>Saving</Button>
+ * ```
+ *
+ * ## Weight
+ *
+ * `default` is the one action a view is for, and there should be one of it.
+ * `secondary` and `outline` are the actions beside it, `ghost` the ones that
+ * should not draw the eye until they are looked for, and `destructive` the
+ * one that cannot be taken back.
+ *
+ * ## Loading
+ *
+ * `loading` sets a spinner over the label and stops presses. The label stays
+ * in place, hidden, so the width does not change: a button that resizes as it
+ * is pressed moves whatever sits beside it.
+ *
+ * ## A link that looks like a button
+ *
+ * An action that goes to another page is a link, whatever it looks like, so
+ * that it opens in a new tab and reads as a link to a screen reader. Pass the
+ * link as `render` and the button's look and behaviour are put on it:
+ * `<Button render={<a href="/" />}>Home</Button>`. The button is the headless
+ * button primitive underneath, so keyboard handling, `disabled` and focus work
+ * the same whatever it is drawn as.
+ */
+import { Button as BaseButton } from '@base-ui/react/button';
+import { isValidElement } from 'react';
 import { tv } from 'tailwind-variants';
 export const buttonVariants = tv({
     base: [
@@ -38,8 +72,10 @@ function Spinner() {
     return (_jsx("svg", { "aria-hidden": "true", "data-slot": "button-spinner", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", className: "absolute inset-0 m-auto animate-spin motion-reduce:animate-none", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) }));
 }
 /** A button. Every attribute of `<button>` passes through. */
-function ButtonRoot({ variant, size, shape, loading = false, disabled, type = 'button', className, children, ...props }) {
-    return (_jsxs("button", { type: type, "data-slot": "button", "data-variant": variant ?? 'default', "aria-busy": loading || undefined, disabled: disabled || loading, className: buttonVariants({ variant, size, shape, className }), ...props, children: [loading ? _jsx(Spinner, {}) : null, _jsx("span", { className: loading ? 'invisible contents' : 'contents', children: children })] }));
+function ButtonRoot({ variant, size, shape, loading = false, disabled, type = 'button', className, children, render, nativeButton, ...props }) {
+    // An element to render tells whether it is a native button; a function cannot, so it says.
+    const native = nativeButton ?? (render === undefined || (isValidElement(render) && render.type === 'button'));
+    return (_jsxs(BaseButton, { type: native ? type : undefined, "data-slot": "button", "data-variant": variant ?? 'default', "aria-busy": loading || undefined, disabled: disabled || loading, focusableWhenDisabled: loading, nativeButton: native, render: render, className: buttonVariants({ variant, size, shape, className }), ...props, children: [loading ? _jsx(Spinner, {}) : null, _jsx("span", { className: loading ? 'invisible contents' : 'contents', children: children })] }));
 }
 ButtonRoot.displayName = 'Button';
 export const Button = ButtonRoot;

package/dist/components/button-group/index.d.ts

@@ -35,6 +35,12 @@
  */
 import type { ComponentProps } from 'react';
 import { type VariantProps } from 'tailwind-variants';
+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 declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
     orientation: {
         horizontal: {
@@ -89,7 +95,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
     root: string[];
     separator: string[];
     text: string[];
-}, import("tailwind-variants").TVReturnType<{
+}, import("tailwind-variants").TVReturnTypeLike<{
     orientation: {
         horizontal: {
             root: string[];
@@ -116,7 +122,7 @@ export declare const buttonGroupVariants: import("tailwind-variants").TVReturnTy
     root: string[];
     separator: string[];
     text: string[];
-}, undefined, unknown, unknown, undefined>>;
+}>>;
 export type ButtonGroupOrientation = NonNullable<VariantProps<typeof buttonGroupVariants>['orientation']>;
 export type ButtonGroupTextSize = NonNullable<VariantProps<typeof buttonGroupVariants>['size']>;
 export interface ButtonGroupProps extends ComponentProps<'div'> {
@@ -127,7 +133,7 @@ export interface ButtonGroupProps extends ComponentProps<'div'> {
  * The group. It is a `role="group"`, so give it an `aria-label` that names
  * what its actions have in common.
  */
-declare function ButtonGroupRoot({ orientation, className, ...props }: ButtonGroupProps): import("react").JSX.Element;
+declare function ButtonGroupRoot({ orientation, className, render, ...props }: ButtonGroupProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ButtonGroupRoot {
     var displayName: string;
 }
@@ -145,7 +151,7 @@ export interface ButtonGroupSeparatorProps extends ComponentProps<'span'> {
  * one, and draws a short line in the button's text colour. It is decorative
  * and hidden from assistive technology.
  */
-declare function ButtonGroupSeparator({ orientation, className, ...props }: ButtonGroupSeparatorProps): import("react").JSX.Element;
+declare function ButtonGroupSeparator({ orientation, className, render, ...props }: ButtonGroupSeparatorProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ButtonGroupSeparator {
     var displayName: string;
 }
@@ -157,7 +163,7 @@ export interface ButtonGroupTextProps extends ComponentProps<'div'> {
  * A cell that is read rather than pressed: a prefix such as `https://`, a unit,
  * or the value a pair of buttons changes.
  */
-declare function ButtonGroupText({ size, className, ...props }: ButtonGroupTextProps): import("react").JSX.Element;
+declare function ButtonGroupText({ size, className, render, ...props }: ButtonGroupTextProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace ButtonGroupText {
     var displayName: string;
 }

package/dist/components/button-group/index.js

@@ -1,5 +1,7 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+'use client';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 /*
  * Which of the three a group is depends on what it holds, so the rules below
  * are scoped by selector rather than by prop:
@@ -83,8 +85,17 @@ export const buttonGroupVariants = tv({
  * The group. It is a `role="group"`, so give it an `aria-label` that names
  * what its actions have in common.
  */
-function ButtonGroupRoot({ orientation = 'horizontal', className, ...props }) {
-    return (_jsx("div", { role: "group", "data-slot": "button-group", "data-orientation": orientation, className: buttonGroupVariants({ orientation }).root({ className }), ...props }));
+function ButtonGroupRoot({ orientation = 'horizontal', className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: 'group',
+            'data-slot': 'button-group',
+            'data-orientation': orientation,
+            className: buttonGroupVariants({ orientation }).root({ className }),
+        }, props),
+    });
 }
 ButtonGroupRoot.displayName = 'ButtonGroup';
 /**
@@ -94,19 +105,32 @@ ButtonGroupRoot.displayName = 'ButtonGroup';
  * one, and draws a short line in the button's text colour. It is decorative
  * and hidden from assistive technology.
  */
-function ButtonGroupSeparator({ orientation = 'vertical', className, ...props }) {
+function ButtonGroupSeparator({ orientation = 'vertical', className, render, ...props }) {
     const slots = buttonGroupVariants({
         orientation: orientation === 'vertical' ? 'horizontal' : 'vertical',
     });
-    return (_jsx("span", { "aria-hidden": "true", "data-slot": "button-group-separator", "data-orientation": orientation, className: slots.separator({ className }), ...props }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            'aria-hidden': 'true',
+            'data-slot': 'button-group-separator',
+            'data-orientation': orientation,
+            className: slots.separator({ className }),
+        }, props),
+    });
 }
 ButtonGroupSeparator.displayName = 'ButtonGroup.Separator';
 /**
  * A cell that is read rather than pressed: a prefix such as `https://`, a unit,
  * or the value a pair of buttons changes.
  */
-function ButtonGroupText({ size, className, ...props }) {
-    return (_jsx("div", { "data-slot": "button-group-text", className: buttonGroupVariants({ size }).text({ className }), ...props }));
+function ButtonGroupText({ size, className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'button-group-text', className: buttonGroupVariants({ size }).text({ className }) }, props),
+    });
 }
 ButtonGroupText.displayName = 'ButtonGroup.Text';
 export const ButtonGroup = Object.assign(ButtonGroupRoot, {

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

@@ -35,6 +35,12 @@
  * finger is down.
  */
 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'];
+};
 /** Where the canvas is looking: the same shape a Flow reports. */
 export interface CanvasViewport {
     x: number;
@@ -75,7 +81,7 @@ export interface CanvasPatternProps extends Omit<ComponentProps<'svg'>, 'childre
     strength?: string;
 }
 /** A pattern across the whole canvas, which pans and scales with its viewport. */
-declare function CanvasPattern({ variant, gap, size, major, fade, strength, className, style, ...props }: CanvasPatternProps): import("react").JSX.Element;
+declare function CanvasPattern({ variant, gap, size, major, fade, strength, className, style, render, ...props }: CanvasPatternProps & RenderProp<'svg'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CanvasPattern {
     var displayName: string;
 }
@@ -95,14 +101,14 @@ export interface CanvasSpotlightProps extends Omit<ComponentProps<'div'>, 'child
  * Lights the patterns near the pointer: the marks inside the circle brighten
  * towards the foreground colour, most at the centre.
  */
-declare function CanvasSpotlight({ radius, position, className, style, ...props }: CanvasSpotlightProps): import("react").JSX.Element;
+declare function CanvasSpotlight({ radius, position, className, style, render, ...props }: CanvasSpotlightProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CanvasSpotlight {
     var displayName: string;
 }
 export interface CanvasContentProps extends ComponentProps<'div'> {
 }
 /** What sits on the canvas, above its patterns and its light. */
-declare function CanvasContent({ className, ...props }: CanvasContentProps): import("react").JSX.Element;
+declare function CanvasContent({ className, render, ...props }: CanvasContentProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace CanvasContent {
     var displayName: string;
 }

package/dist/components/canvas/index.js

@@ -38,6 +38,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { createContext, useCallback, useContext, useEffect, useId, 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 canvasVariants = tv({
     slots: {
         root: 'relative isolate overflow-hidden bg-background text-foreground',
@@ -94,7 +96,7 @@ function Marks({ id, spec, viewport }) {
     return (_jsxs(_Fragment, { children: [_jsxs("defs", { children: [_jsx("pattern", { id: `${id}-minor`, width: gap, height: gap, patternUnits: "userSpaceOnUse", patternTransform: transform, children: variant === 'grid' ? (_jsx("path", { d: `M${half} 0V${gap}M0 ${half}H${gap}`, fill: "none", stroke: "currentColor", strokeWidth: size, opacity: major ? 0.6 : 1 })) : (mark(1, half)) }), major ? (_jsx("pattern", { id: `${id}-major`, width: tile, height: tile, patternUnits: "userSpaceOnUse", patternTransform: transform, children: variant === 'grid' ? (_jsx("path", { d: `M${half} 0V${tile}M0 ${half}H${tile}`, fill: "none", stroke: "currentColor", strokeWidth: size * 1.5 })) : (mark(variant === 'dots' ? 1.8 : 1.6, half)) })) : null] }), _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-minor)` }), major ? _jsx("rect", { width: "100%", height: "100%", fill: `url(#${id}-major)` }) : null] }));
 }
 /** A pattern across the whole canvas, which pans and scales with its viewport. */
-function CanvasPattern({ variant = 'dots', gap, size, major, fade = 'none', strength, className, style, ...props }) {
+function CanvasPattern({ variant = 'dots', gap, size, major, fade = 'none', strength, className, style, render, ...props }) {
     const canvas = useCanvas('Canvas.Pattern');
     const id = `canvas${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
     const spec = useMemo(() => ({
@@ -108,19 +110,29 @@ function CanvasPattern({ variant = 'dots', gap, size, major, fade = 'none', stre
     // Known to the spotlight, which draws a lit copy of every pattern.
     useLayoutEffect(() => register(id, spec), [register, id, spec]);
     const mask = FADES[fade];
-    return (_jsx("svg", { "aria-hidden": "true", "data-slot": "canvas-pattern", className: canvasVariants().layer({ className: [canvasVariants().pattern(), className] }), style: {
-            opacity: strength ?? (variant === 'grid' ? '10%' : '28%'),
-            maskImage: mask,
-            WebkitMaskImage: mask,
-            ...style,
-        }, ...props, children: _jsx(Marks, { id: id, spec: spec, viewport: canvas.viewport }) }));
+    return useRender({
+        defaultTagName: 'svg',
+        render,
+        props: mergeProps({
+            'aria-hidden': 'true',
+            'data-slot': 'canvas-pattern',
+            className: canvasVariants().layer({ className: [canvasVariants().pattern(), className] }),
+            style: {
+                opacity: strength ?? (variant === 'grid' ? '10%' : '28%'),
+                maskImage: mask,
+                WebkitMaskImage: mask,
+                ...style,
+            },
+            children: (_jsx(_Fragment, { children: _jsx(Marks, { id: id, spec: spec, viewport: canvas.viewport }) })),
+        }, props),
+    });
 }
 CanvasPattern.displayName = 'Canvas.Pattern';
 /**
  * Lights the patterns near the pointer: the marks inside the circle brighten
  * towards the foreground colour, most at the centre.
  */
-function CanvasSpotlight({ radius = 100, position, className, style, ...props }) {
+function CanvasSpotlight({ radius = 100, position, className, style, render, ...props }) {
     const canvas = useCanvas('Canvas.Spotlight');
     const light = useRef(null);
     const prefix = `spot${useId().replace(/[^a-zA-Z0-9]/g, '')}`;
@@ -180,26 +192,42 @@ function CanvasSpotlight({ radius = 100, position, className, style, ...props })
     }, [canvas.root, position]);
     // A round window on the lit copy: opaque at the pointer, clear at the radius.
     const circle = `radial-gradient(circle var(--canvas-r) at var(--canvas-x, -999px) var(--canvas-y, -999px), #000, transparent)`;
-    return (_jsx("div", { ref: light, "aria-hidden": "true", "data-slot": "canvas-spotlight", "data-on": position ? '' : undefined, className: canvasVariants().layer({ className: [canvasVariants().spotlight(), className] }), style: {
-            '--canvas-r': `${radius}px`,
-            ...(position ? { '--canvas-x': `${position.x}px`, '--canvas-y': `${position.y}px` } : null),
-            ...style,
-        }, ...props, children: canvas.patterns.map((pattern) => {
-            const fade = FADES[pattern.fade];
-            // The pattern's own fade still applies inside the light.
-            const mask = fade ? `${circle}, ${fade}` : circle;
-            return (_jsx("svg", { className: "absolute inset-0 size-full", style: {
-                    maskImage: mask,
-                    WebkitMaskImage: mask,
-                    maskComposite: fade ? 'intersect' : undefined,
-                    WebkitMaskComposite: fade ? 'source-in' : undefined,
-                }, children: _jsx(Marks, { id: `${prefix}${pattern.key}`, spec: pattern, viewport: canvas.viewport }) }, pattern.key));
-        }) }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: light,
+            'aria-hidden': 'true',
+            'data-slot': 'canvas-spotlight',
+            'data-on': position ? '' : undefined,
+            className: canvasVariants().layer({ className: [canvasVariants().spotlight(), className] }),
+            style: {
+                '--canvas-r': `${radius}px`,
+                ...(position ? { '--canvas-x': `${position.x}px`, '--canvas-y': `${position.y}px` } : null),
+                ...style,
+            },
+            children: (_jsx(_Fragment, { children: canvas.patterns.map((pattern) => {
+                    const fade = FADES[pattern.fade];
+                    // The pattern's own fade still applies inside the light.
+                    const mask = fade ? `${circle}, ${fade}` : circle;
+                    return (_jsx("svg", { className: "absolute inset-0 size-full", style: {
+                            maskImage: mask,
+                            WebkitMaskImage: mask,
+                            maskComposite: fade ? 'intersect' : undefined,
+                            WebkitMaskComposite: fade ? 'source-in' : undefined,
+                        }, children: _jsx(Marks, { id: `${prefix}${pattern.key}`, spec: pattern, viewport: canvas.viewport }) }, pattern.key));
+                }) })),
+        }, props),
+    });
 }
 CanvasSpotlight.displayName = 'Canvas.Spotlight';
 /** What sits on the canvas, above its patterns and its light. */
-function CanvasContent({ className, ...props }) {
-    return _jsx("div", { "data-slot": "canvas-content", className: canvasVariants().content({ className }), ...props });
+function CanvasContent({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'canvas-content', className: canvasVariants().content({ className }) }, props),
+    });
 }
 CanvasContent.displayName = 'Canvas.Content';
 export const Canvas = Object.assign(CanvasRoot, {