panelui-web 0.10.0 → 0.11.0

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

@@ -0,0 +1,216 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Radio Group — one choice from a short list, all of it visible at once.
+ *
+ * ```tsx
+ * <RadioGroup defaultValue="standard" aria-label="Delivery">
+ *   <Label><Radio value="standard" /><Label.Text>Standard</Label.Text></Label>
+ *   <Label><Radio value="express" /><Label.Text>Express</Label.Text></Label>
+ * </RadioGroup>
+ * ```
+ *
+ * ## The dot lands
+ *
+ * The chosen radio's centre grows in with a small overshoot, and the ring
+ * thickens to meet it, so the choice reads as something being set down
+ * rather than a colour changing. The one it leaves shrinks back at the same
+ * time. With reduced motion both happen at once.
+ *
+ * ## Arrow keys move the choice
+ *
+ * The group is one stop for Tab. Inside it, the arrow keys move the choice
+ * from one radio to the next, as a native radio group does.
+ *
+ * ## As cards
+ *
+ * `RadioGroup.Card` puts each option in a card of its own, with a title, a
+ * line of description and something at the far end such as a price, and the
+ * radio drawn inside it. The whole card is the target. It comes in three
+ * versions: `outline` rings the chosen card in its colour, `filled` tints
+ * it, and `dither` fills it from the far edge with an ordered dither in its
+ * colour, densest at the edge and thinning towards the text, which sweeps in
+ * as the card is chosen and back out as it is left.
+ *
+ * ## When to use something else
+ *
+ * For two to five options that each need a line of explanation, ChoiceCards
+ * lays them out as cards. For more than about seven, a Select keeps the form
+ * short. For a choice that takes effect at once, without a form to submit,
+ * Tabs or a ButtonGroup read better.
+ */
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+const radioVariants = tv({
+    slots: {
+        group: 'flex gap-3 data-[orientation=vertical]:flex-col data-[orientation=horizontal]:flex-row data-[orientation=horizontal]:flex-wrap',
+        root: [
+            'group/radio relative inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border outline-none',
+            'border-input bg-background shadow-xs dark:bg-input/30',
+            'transition-[border-color,border-width,box-shadow] duration-200',
+            'hover:not-data-disabled:border-[color-mix(in_oklab,var(--input),var(--foreground)_25%)]',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'data-checked:border-(--radio-color)',
+            'aria-invalid:border-destructive',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+            "after:absolute after:-inset-2 after:content-['']",
+        ],
+        indicator: [
+            'pointer-events-none size-[46%] rounded-full bg-(--radio-color)',
+            'scale-0 transition-transform duration-300 ease-[cubic-bezier(0.3,1.6,0.5,1)]',
+            'data-checked:scale-100 motion-reduce:transition-none',
+        ],
+    },
+    variants: {
+        size: {
+            sm: { root: 'size-3.5' },
+            md: { root: 'size-4 data-checked:border-[1.5px]' },
+            lg: { root: 'size-5 data-checked:border-2' },
+        },
+        color: {
+            primary: { root: '[--radio-color:var(--primary)]' },
+            success: { root: '[--radio-color:var(--success)]' },
+            info: { root: '[--radio-color:var(--info)]' },
+            destructive: { root: '[--radio-color:var(--destructive)]' },
+        },
+    },
+    defaultVariants: { size: 'md', color: 'primary' },
+});
+/** Holds one value for the radios inside it. Takes `value`/`onValueChange` or `defaultValue`, and `name` for a form. */
+function RadioGroupRoot({ orientation = 'vertical', className, ...props }) {
+    return (_jsx(BaseRadioGroup, { "data-slot": "radio-group", "data-orientation": orientation, "aria-orientation": orientation, className: radioVariants().group({ className }), ...props }));
+}
+RadioGroupRoot.displayName = 'RadioGroup';
+/** One option. `value` is what the group's value becomes when it is chosen. */
+function Radio({ size = 'md', color, label, className, ...props }) {
+    const slots = radioVariants({ size, color });
+    return (_jsx(BaseRadio.Root, { "data-slot": "radio", "data-size": size, "aria-label": label, className: slots.root({ className }), ...props, children: _jsx(BaseRadio.Indicator, { "data-slot": "radio-indicator", keepMounted: true, className: slots.indicator() }) }));
+}
+Radio.displayName = 'RadioGroup.Item';
+/** The 4×4 Bayer matrix, as thresholds 0–15. */
+const BAYER = [0, 8, 2, 10, 12, 4, 14, 6, 3, 11, 1, 9, 15, 7, 13, 5];
+/** Masks an element to an even ordered dither at `level` of 16, in 2px cells. */
+function ditherMask(level) {
+    let rects = '';
+    BAYER.forEach((threshold, index) => {
+        if (threshold < level)
+            rects += `<rect x='${index % 4}' y='${Math.floor(index / 4)}' width='1' height='1'/>`;
+    });
+    const image = `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'>${rects}</svg>`)}")`;
+    return { maskImage: image, WebkitMaskImage: image, maskSize: '8px 8px', WebkitMaskSize: '8px 8px' };
+}
+/** The dither ramp's bands, from the far edge in: how wide each reaches, and how dense it is. */
+const RAMP = [
+    { reach: '9%', level: 12 },
+    { reach: '17%', level: 7 },
+    { reach: '25%', level: 3 },
+    { reach: '32%', level: 1 },
+].map((band) => ({ ...band, style: ditherMask(band.level) }));
+const cardVariants = tv({
+    slots: {
+        card: [
+            'group/card relative flex w-full min-w-0 cursor-pointer items-start gap-3 overflow-hidden rounded-xl border p-3.5 text-start outline-none select-none',
+            'border-border bg-background shadow-xs transition-[border-color,background-color,box-shadow] duration-200 dark:bg-input/20',
+            'hover:not-data-disabled:border-[color-mix(in_oklab,var(--border),var(--foreground)_18%)]',
+            'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+            'data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        ],
+        dot: [
+            'relative z-10 mt-0.5 inline-flex size-4 shrink-0 items-center justify-center rounded-full border border-input bg-background',
+            'transition-[border-color,border-width] duration-200 group-data-checked/card:border-[1.5px] group-data-checked/card:border-(--radio-color)',
+        ],
+        dotFill: [
+            'size-[46%] rounded-full bg-(--radio-color) scale-0 transition-transform duration-300 ease-[cubic-bezier(0.3,1.6,0.5,1)]',
+            'group-data-checked/card:scale-100 motion-reduce:transition-none',
+        ],
+        body: 'relative z-10 flex min-w-0 flex-1 flex-col gap-0.5',
+        title: 'text-sm font-medium leading-5 text-foreground',
+        description: 'text-[0.8125rem] leading-5 text-muted-foreground',
+        aside: 'relative z-10 ms-auto shrink-0 text-sm font-medium tabular-nums text-foreground',
+        ramp: 'pointer-events-none absolute inset-0',
+        band: [
+            'absolute inset-y-0 end-0 bg-(--radio-color)',
+            // Hidden by sliding its clip to the far edge, so the sweep runs from there inwards.
+            '[clip-path:inset(0_0_0_100%)] rtl:[clip-path:inset(0_100%_0_0)] transition-[clip-path] duration-500 ease-[cubic-bezier(0.22,1,0.36,1)]',
+            'group-data-checked/card:[clip-path:inset(0_0_0_0)] motion-reduce:transition-none',
+        ],
+        cards: 'grid gap-2',
+    },
+    variants: {
+        appearance: {
+            outline: {
+                card: 'data-checked:border-(--radio-color) data-checked:shadow-[0_0_0_1px_var(--radio-color)]',
+            },
+            filled: {
+                card: [
+                    'data-checked:border-[color-mix(in_oklab,var(--radio-color)_45%,var(--background))]',
+                    'data-checked:bg-[color-mix(in_oklab,var(--radio-color)_9%,var(--background))] dark:data-checked:bg-[color-mix(in_oklab,var(--radio-color)_16%,var(--background))]',
+                ],
+            },
+            dither: {
+                card: 'data-checked:border-[color-mix(in_oklab,var(--radio-color)_55%,var(--background))]',
+            },
+        },
+        color: {
+            primary: { card: '[--radio-color:var(--primary)]' },
+            success: { card: '[--radio-color:var(--success)]' },
+            info: { card: '[--radio-color:var(--info)]' },
+            destructive: { card: '[--radio-color:var(--destructive)]' },
+        },
+    },
+    defaultVariants: { appearance: 'outline', color: 'primary' },
+});
+/** One option drawn as a card, with its radio inside. The whole card is pressed to choose it. */
+function RadioCard({ appearance = 'outline', color, className, children, ...props }) {
+    const slots = cardVariants({ appearance, color });
+    return (_jsxs(BaseRadio.Root, { "data-slot": "radio-card", "data-appearance": appearance, className: slots.card({ className }), ...props, children: [appearance === 'dither' ? (_jsx("span", { "aria-hidden": "true", className: slots.ramp(), children: RAMP.map((band) => (_jsx("span", { className: slots.band(), style: { width: band.reach, ...band.style } }, band.level))) })) : null, _jsx("span", { "data-slot": "radio-card-indicator", "aria-hidden": "true", className: slots.dot(), children: _jsx("span", { className: slots.dotFill() }) }), children] }));
+}
+RadioCard.displayName = 'RadioGroup.Card';
+/** Holds a card's title and description, beside the radio. */
+function RadioCardBody({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'radio-card-body', className: cardVariants().body({ className }) }, props),
+    });
+}
+RadioCardBody.displayName = 'RadioGroup.CardBody';
+/** The option's name. */
+function RadioCardTitle({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'radio-card-title', className: cardVariants().title({ className }) }, props),
+    });
+}
+RadioCardTitle.displayName = 'RadioGroup.CardTitle';
+/** A line under the name saying what the option means. */
+function RadioCardDescription({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'radio-card-description', className: cardVariants().description({ className }) }, props),
+    });
+}
+RadioCardDescription.displayName = 'RadioGroup.CardDescription';
+/** Pushed to the far end of the card: a price, a duration, a badge. */
+function RadioCardAside({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'radio-card-aside', className: cardVariants().aside({ className }) }, props),
+    });
+}
+RadioCardAside.displayName = 'RadioGroup.CardAside';
+export const RadioGroup = Object.assign(RadioGroupRoot, {
+    Item: Radio,
+    Card: RadioCard,
+    CardBody: RadioCardBody,
+    CardTitle: RadioCardTitle,
+    CardDescription: RadioCardDescription,
+    CardAside: RadioCardAside,
+});
+export { Radio, Radio as RadioGroupItem, RadioCard, RadioCard as RadioGroupCard, RadioCardBody as RadioGroupCardBody, RadioCardTitle as RadioGroupCardTitle, RadioCardDescription as RadioGroupCardDescription, RadioCardAside as RadioGroupCardAside, };

package/dist/components/range-meter/index.d.ts

@@ -35,6 +35,12 @@
  * threshold is how a meter says the reading has gone from fine to not.
  */
 import { type ComponentProps, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 /** Which of the theme's roles the lit ticks and the tag are drawn in. */
 export type RangeMeterColor = 'primary' | 'info' | 'success' | 'warning' | 'destructive';
 export interface RangeMeterProps extends Omit<ComponentProps<'div'>, 'onChange' | 'color'> {
@@ -66,7 +72,7 @@ export interface RangeMeterProps extends Omit<ComponentProps<'div'>, 'onChange'
     /** Drawn in the tag before the number: an icon. */
     children?: ReactNode;
 }
-declare function RangeMeterRoot({ min, max, value, onValueChange, step, marker, ticks, color, formatValue, label, valueText, className, children, ...props }: RangeMeterProps): import("react").JSX.Element;
+declare function RangeMeterRoot({ min, max, value, onValueChange, step, marker, ticks, color, formatValue, label, valueText, className, children, render, ...props }: RangeMeterProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace RangeMeterRoot {
     var displayName: string;
 }
@@ -76,7 +82,7 @@ export interface RangeMeterLabelProps extends ComponentProps<'p'> {
  * The meter's name, written over it. The meter's own `label` is what a screen
  * reader says; this is what everyone else reads.
  */
-declare function RangeMeterLabel({ className, ...props }: RangeMeterLabelProps): import("react").JSX.Element;
+declare function RangeMeterLabel({ className, render, ...props }: RangeMeterLabelProps & RenderProp<'p'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace RangeMeterLabel {
     var displayName: string;
 }
@@ -87,7 +93,7 @@ export interface RangeMeterScaleProps extends Omit<ComponentProps<'div'>, 'child
     end: ReactNode;
 }
 /** What the two ends of the ruler stand for, written under it at either side. */
-declare function RangeMeterScale({ start, end, className, ...props }: RangeMeterScaleProps): import("react").JSX.Element;
+declare function RangeMeterScale({ start, end, className, render, ...props }: RangeMeterScaleProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace RangeMeterScale {
     var displayName: string;
 }

package/dist/components/range-meter/index.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * RangeMeter — where a reading sits between its lowest and its highest, on a
  * ruler of ticks that rises under the value.
@@ -38,6 +38,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  */
 import { useCallback, 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 rangeMeterVariants = tv({
     slots: {
         // Room above the ruler for the tag, so the tag is inside the control's
@@ -90,7 +92,7 @@ const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
 const SPREAD = 2.6;
 /** A resting tick's height, as a share of the ruler's. */
 const REST = 0.34;
-function RangeMeterRoot({ min = 0, max = 100, value, onValueChange, step = 1, marker, ticks = 41, color = 'primary', formatValue, label = 'Reading', valueText, className, children, ...props }) {
+function RangeMeterRoot({ min = 0, max = 100, value, onValueChange, step = 1, marker, ticks = 41, color = 'primary', formatValue, label = 'Reading', valueText, className, children, render, ...props }) {
     const interactive = onValueChange !== undefined;
     const slots = rangeMeterVariants({ color, interactive, marked: marker !== undefined });
     const ruler = useRef(null);
@@ -150,40 +152,72 @@ function RangeMeterRoot({ min = 0, max = 100, value, onValueChange, step = 1, ma
         event.preventDefault();
         onValueChange(clamp(Number(next.toFixed(places)), min, max));
     };
-    return (_jsxs("div", { role: interactive ? 'slider' : 'meter', "aria-label": label, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-valuetext": valueText, "aria-orientation": interactive ? 'horizontal' : undefined, tabIndex: interactive ? 0 : undefined, className: slots.root({ className }), onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: endDrag, onPointerCancel: endDrag, onKeyDown: onKeyDown, ...props, children: [_jsxs("span", { "data-tag": "", className: slots.tag(), style: {
-                    insetInlineStart: `${(share * 100).toFixed(2)}%`,
-                    // Hung by the same share of its own width as the point is along the
-                    // ruler, which keeps it over the point and inside the ends.
-                    translate: `calc(${share.toFixed(4)} * -100% * var(--pu-dir, 1))`,
-                }, children: [children, formatValue ? formatValue(value) : value] }), _jsxs("div", { ref: ruler, "aria-hidden": "true", className: slots.ruler(), children: [Array.from({ length: count }, (_, index) => {
-                        const distance = (index - at) / SPREAD;
-                        // A bell: full height at the reading, resting height a few ticks out.
-                        const rise = Math.exp(-distance * distance);
-                        const lit = index <= at + 0.001;
-                        const part = rangeMeterVariants({ lit, crest: index === crest });
-                        return (_jsx("span", { className: part.tick(), style: {
-                                // Rounded, so the server and the browser write the same
-                                // string for it and the page hydrates without a mismatch.
-                                height: `${((REST + (1 - REST) * rise) * 100).toFixed(1)}%`,
-                                // Lit ticks brighten towards the reading, like a tail behind it.
-                                opacity: lit
-                                    ? Number((0.35 + 0.65 * (crest === 0 ? 1 : Math.min(1, index / crest))).toFixed(3))
-                                    : undefined,
-                            } }, index));
-                    }), marker !== undefined ? (_jsx("span", { className: slots.marker(), style: { insetInlineStart: `${(clamp((marker - min) / span, 0, 1) * 100).toFixed(2)}%` } })) : null] })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            role: interactive ? 'slider' : 'meter',
+            'aria-label': label,
+            'aria-valuemin': min,
+            'aria-valuemax': max,
+            'aria-valuenow': value,
+            'aria-valuetext': valueText,
+            'aria-orientation': interactive ? 'horizontal' : undefined,
+            tabIndex: interactive ? 0 : undefined,
+            className: slots.root({ className }),
+            onPointerDown: onPointerDown,
+            onPointerMove: onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            onKeyDown: onKeyDown,
+            children: (_jsxs(_Fragment, { children: [_jsxs("span", { "data-tag": "", className: slots.tag(), style: {
+                            insetInlineStart: `${(share * 100).toFixed(2)}%`,
+                            // Hung by the same share of its own width as the point is along the
+                            // ruler, which keeps it over the point and inside the ends.
+                            translate: `calc(${share.toFixed(4)} * -100% * var(--pu-dir, 1))`,
+                        }, children: [children, formatValue ? formatValue(value) : value] }), _jsxs("div", { ref: ruler, "aria-hidden": "true", className: slots.ruler(), children: [Array.from({ length: count }, (_, index) => {
+                                const distance = (index - at) / SPREAD;
+                                // A bell: full height at the reading, resting height a few ticks out.
+                                const rise = Math.exp(-distance * distance);
+                                const lit = index <= at + 0.001;
+                                const part = rangeMeterVariants({ lit, crest: index === crest });
+                                return (_jsx("span", { className: part.tick(), style: {
+                                        // Rounded, so the server and the browser write the same
+                                        // string for it and the page hydrates without a mismatch.
+                                        height: `${((REST + (1 - REST) * rise) * 100).toFixed(1)}%`,
+                                        // Lit ticks brighten towards the reading, like a tail behind it.
+                                        opacity: lit
+                                            ? Number((0.35 + 0.65 * (crest === 0 ? 1 : Math.min(1, index / crest))).toFixed(3))
+                                            : undefined,
+                                    } }, index));
+                            }), marker !== undefined ? (_jsx("span", { className: slots.marker(), style: { insetInlineStart: `${(clamp((marker - min) / span, 0, 1) * 100).toFixed(2)}%` } })) : null] })] })),
+        }, props),
+    });
 }
 RangeMeterRoot.displayName = 'RangeMeter';
 /**
  * The meter's name, written over it. The meter's own `label` is what a screen
  * reader says; this is what everyone else reads.
  */
-function RangeMeterLabel({ className, ...props }) {
-    return _jsx("p", { "data-slot": "range-meter-label", className: rangeMeterVariants().label({ className }), ...props });
+function RangeMeterLabel({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({ 'data-slot': 'range-meter-label', className: rangeMeterVariants().label({ className }) }, props),
+    });
 }
 RangeMeterLabel.displayName = 'RangeMeter.Label';
 /** What the two ends of the ruler stand for, written under it at either side. */
-function RangeMeterScale({ start, end, className, ...props }) {
-    return (_jsxs("div", { "data-slot": "range-meter-scale", className: rangeMeterVariants().scale({ className }), ...props, children: [_jsx("span", { children: start }), _jsx("span", { children: end })] }));
+function RangeMeterScale({ start, end, className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'range-meter-scale',
+            className: rangeMeterVariants().scale({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { children: start }), _jsx("span", { children: end })] })),
+        }, props),
+    });
 }
 RangeMeterScale.displayName = 'RangeMeter.Scale';
 export const RangeMeter = Object.assign(RangeMeterRoot, {

package/dist/components/rolling-number/index.d.ts

@@ -23,6 +23,12 @@
  * the nines roll to zeroes instead of being replaced by them.
  */
 import { type ComponentProps } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 export interface RollingNumberProps extends Omit<ComponentProps<'span'>, 'children'> {
     /** The number to show. Each digit rolls to its new value on its own. */
     value: number;
@@ -40,7 +46,8 @@ export interface RollingNumberProps extends Omit<ComponentProps<'span'>, 'childr
     /** How long a digit takes to roll, in milliseconds. */
     duration?: number;
 }
-export declare function RollingNumber({ value, format, locales, duration, className, ...props }: RollingNumberProps): import("react").JSX.Element;
+export declare function RollingNumber({ value, format, locales, duration, className, render, ...props }: RollingNumberProps & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare namespace RollingNumber {
     var displayName: string;
 }
+export {};

package/dist/components/rolling-number/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";
 /**
  * RollingNumber — a number whose digits roll to their new values.
  *
@@ -26,6 +26,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useMemo } from 'react';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const rollingNumberVariants = tv({
     slots: {
         // `tabular-nums` so a 1 is as wide as an 8 and the number does not change
@@ -61,7 +63,7 @@ function piecesOf(parts) {
     });
     return pieces;
 }
-export function RollingNumber({ value, format, locales = 'en-US', duration = 600, className, ...props }) {
+export function RollingNumber({ value, format, locales = 'en-US', duration = 600, className, render, ...props }) {
     const slots = rollingNumberVariants();
     // The options object is usually written inline, so it is new on every
     // render. Its contents are what the formatter depends on.
@@ -73,9 +75,16 @@ export function RollingNumber({ value, format, locales = 'en-US', duration = 600
         const parts = formatter.formatToParts(value);
         return { label: parts.map((part) => part.value).join(''), pieces: piecesOf(parts) };
     }, [formatter, value]);
-    return (_jsxs("span", { className: slots.root({ className }), ...props, children: [_jsx("span", { className: "sr-only", children: label }), pieces.map((piece) => piece.digit === null ? (_jsx("span", { "aria-hidden": "true", children: piece.text }, piece.key)) : (_jsxs("span", { "aria-hidden": "true", className: slots.column(), children: [_jsx("span", { className: "invisible", children: "0" }), _jsx("span", { className: slots.window(), children: _jsx("span", { className: slots.strip(), style: {
-                                transform: `translateY(${-piece.digit * 10}%)`,
-                                transitionDuration: `${duration}ms`,
-                            }, children: DIGITS.map((digit) => (_jsx("span", { className: slots.digit(), children: digit }, digit))) }) })] }, piece.key)))] }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({
+            className: slots.root({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: label }), pieces.map((piece) => piece.digit === null ? (_jsx("span", { "aria-hidden": "true", children: piece.text }, piece.key)) : (_jsxs("span", { "aria-hidden": "true", className: slots.column(), children: [_jsx("span", { className: "invisible", children: "0" }), _jsx("span", { className: slots.window(), children: _jsx("span", { className: slots.strip(), style: {
+                                        transform: `translateY(${-piece.digit * 10}%)`,
+                                        transitionDuration: `${duration}ms`,
+                                    }, children: DIGITS.map((digit) => (_jsx("span", { className: slots.digit(), children: digit }, digit))) }) })] }, piece.key)))] })),
+        }, props),
+    });
 }
 RollingNumber.displayName = 'RollingNumber';

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

@@ -39,6 +39,12 @@
  */
 import { Select as BaseSelect } from '@base-ui/react/select';
 import type { ComponentProps, 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 SelectProps<Value = string, Multiple extends boolean | undefined = false> = BaseSelect.Root.Props<Value, Multiple>;
 /** Holds the chosen value. Takes `value`/`onValueChange`, `defaultValue`, `items`, `name`, `disabled` and `multiple`. */
 declare function SelectRoot<Value = string, Multiple extends boolean | undefined = false>(props: SelectProps<Value, Multiple>): import("react").JSX.Element;
@@ -118,7 +124,7 @@ declare namespace SelectGroupLabel {
 export interface SelectSeparatorProps extends ComponentProps<'div'> {
 }
 /** A rule between groups of options. */
-declare function SelectSeparator({ className, ...props }: SelectSeparatorProps): import("react").JSX.Element;
+declare function SelectSeparator({ className, render, ...props }: SelectSeparatorProps & RenderProp<'div'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace SelectSeparator {
     var displayName: string;
 }

package/dist/components/select/index.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Select — a button that opens a list of options, one of which is chosen.
@@ -40,6 +41,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Select as BaseSelect } from '@base-ui/react/select';
 import { tv } from 'tailwind-variants';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const selectVariants = tv({
     slots: {
         trigger: [
@@ -112,12 +115,14 @@ SelectRoot.displayName = 'Select';
 function Chevron({ variant }) {
     // A field shows both directions, since its list can open either way over it.
     // A chip shows one, and turns over while its list is open.
-    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: variant === 'default' || variant === undefined ? _jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) : _jsx("path", { d: "m6 9 6 6 6-6" }) }));
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: variant === 'default' || variant === undefined ? (_jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" })) : (_jsx("path", { d: "m6 9 6 6 6-6" })) }));
 }
 /** The button that opens the list. Put a `Select.Value` in it. */
 function SelectTrigger({ variant, size, icon, className, children, ...props }) {
     const slots = selectVariants({ variant, size });
-    return (_jsxs(BaseSelect.Trigger, { "data-slot": "select-trigger", className: slots.trigger({ className }), ...props, children: [children, icon === null ? null : (_jsx(BaseSelect.Icon, { "data-slot": "select-icon", className: slots.icon({ className: variant === 'default' || variant === undefined ? 'rotate-0!' : undefined }), children: icon ?? _jsx(Chevron, { variant: variant }) }))] }));
+    return (_jsxs(BaseSelect.Trigger, { "data-slot": "select-trigger", className: slots.trigger({ className }), ...props, children: [children, icon === null ? null : (_jsx(BaseSelect.Icon, { "data-slot": "select-icon", className: slots.icon({
+                    className: variant === 'default' || variant === undefined ? 'rotate-0!' : undefined,
+                }), children: icon ?? _jsx(Chevron, { variant: variant }) }))] }));
 }
 SelectTrigger.displayName = 'Select.Trigger';
 /** The chosen option's label, or `placeholder` while there is none. */
@@ -148,8 +153,12 @@ function SelectGroupLabel({ className, ...props }) {
 }
 SelectGroupLabel.displayName = 'Select.GroupLabel';
 /** A rule between groups of options. */
-function SelectSeparator({ className, ...props }) {
-    return _jsx("div", { role: "separator", "data-slot": "select-separator", className: selectVariants().separator({ className }), ...props });
+function SelectSeparator({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ role: 'separator', 'data-slot': 'select-separator', className: selectVariants().separator({ className }) }, props),
+    });
 }
 SelectSeparator.displayName = 'Select.Separator';
 export const Select = Object.assign(SelectRoot, {

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

@@ -1,4 +1,10 @@
 import { type ComponentProps, type ReactElement, type ReactNode } from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import type { ElementType as RenderElementType } from 'react';
+/** Draws a part as another element, or composes it with a component: `render={<a href="/" />}`. */
+type RenderProp<Tag extends RenderElementType> = {
+    render?: useRender.ComponentProps<Tag>['render'];
+};
 /** Where the sheet rises from, which is also the direction it leaves in. */
 export type SheetSide = 'bottom' | 'top' | 'left' | 'right';
 export interface SheetProps {
@@ -119,7 +125,7 @@ export interface SheetHeaderProps extends Omit<ComponentProps<'div'>, 'title'> {
  * The heading block. It leaves room for the close button beside the title,
  * so the two share the top line instead of stacking.
  */
-declare function SheetHeader({ title, description, className, children, ...props }: SheetHeaderProps): import("react").JSX.Element;
+declare function SheetHeader({ title, description, className, children, render, ...props }: SheetHeaderProps & RenderProp<'div'>): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace SheetHeader {
     var displayName: string;
 }
@@ -212,7 +218,7 @@ export interface SheetSlideProps extends ComponentProps<'div'> {
     aspect?: string;
 }
 /** One slide: a rounded frame that fills with an image, a video or anything drawn. */
-declare function SheetSlide({ label, aspect, className, style, children, ...props }: SheetSlideProps): import("react").JSX.Element;
+declare function SheetSlide({ label, aspect, className, style, children, render, ...props }: SheetSlideProps & RenderProp<'div'>): import("react").JSX.Element;
 declare namespace SheetSlide {
     var displayName: string;
 }