panelui-web 0.10.0 → 0.11.0

package/dist/components/prompt/index.js

@@ -68,6 +68,8 @@ import { Button } from '../button/index.js';
 import { Menu } from '../menu/index.js';
 import { Select } from '../select/index.js';
 import { Textarea } from '../textarea/index.js';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
 const promptVariants = tv({
     slots: {
         root: 'isolate flex w-full flex-col',
@@ -120,10 +122,7 @@ const promptVariants = tv({
         // The plus turns to a cross while its menu is open.
         menuTrigger: 'data-popup-open:bg-accent [&_svg]:transition-transform [&_svg]:duration-200 data-popup-open:[&_svg]:rotate-45 motion-reduce:[&_svg]:transition-none',
         modelValue: 'flex min-w-0 items-center gap-2 [&_svg]:size-4',
-        submit: [
-            'relative size-10 shrink-0 overflow-visible rounded-full p-0',
-            'disabled:opacity-40',
-        ],
+        submit: ['relative size-10 shrink-0 overflow-visible rounded-full p-0', 'disabled:opacity-40'],
         submitIcon: 'absolute inset-0 m-auto flex items-center justify-center transition-[opacity,scale,rotate] duration-200 ease-out motion-reduce:transition-none [&_svg]:size-[18px]',
         submitRing: 'pointer-events-none absolute -inset-[3px] size-[calc(100%+6px)] text-primary transition-opacity duration-200',
         statusText: 'min-w-0 truncate bg-[linear-gradient(90deg,var(--muted-foreground)_35%,var(--foreground)_50%,var(--muted-foreground)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent',
@@ -298,7 +297,25 @@ function PromptRoot({ value: controlledValue, defaultValue = '', onValueChange,
         keyHandler,
         listbox,
         setListbox,
-    }), [value, setValue, attachments, addFiles, removeAttachment, openFileDialog, status, mode, busy, disabled, empty, submit, stop, onStop, dragging, fieldId, listbox]);
+    }), [
+        value,
+        setValue,
+        attachments,
+        addFiles,
+        removeAttachment,
+        openFileDialog,
+        status,
+        mode,
+        busy,
+        disabled,
+        empty,
+        submit,
+        stop,
+        onStop,
+        dragging,
+        fieldId,
+        listbox,
+    ]);
     const send = (event) => {
         event.preventDefault();
         submit();
@@ -372,55 +389,88 @@ function PromptStatus({ open, mode, icon, spinner = true, children, ...props })
 }
 PromptStatus.displayName = 'Prompt.Status';
 /** A strip under the field, inset from its edges, for where the message is going: a branch, a folder, a ticket. */
-function PromptContext({ open, mode, className, ...props }) {
+function PromptContext({ open, mode, className, render, ...props }) {
     const shown = useBandOpen('Prompt.Context', open, mode, () => true);
     const slots = promptVariants();
     const clip = useRef(null);
     useEffect(() => {
         clip.current?.toggleAttribute('inert', !shown);
     }, [shown]);
-    return (_jsx("div", { "data-slot": "prompt-context", "data-open": shown ? '' : undefined, className: slots.contextFold({ className: shown ? '-mt-5 grid-rows-[1fr] opacity-100' : 'mt-0 grid-rows-[0fr] opacity-0' }), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: _jsx("div", { className: slots.context({ className }), ...props }) }) }));
+    const element = useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ className: slots.context({ className }) }, props),
+    });
+    return (_jsx("div", { "data-slot": "prompt-context", "data-open": shown ? '' : undefined, className: slots.contextFold({
+            className: shown ? '-mt-5 grid-rows-[1fr] opacity-100' : 'mt-0 grid-rows-[0fr] opacity-0',
+        }), children: _jsx("div", { ref: clip, className: "min-h-0 overflow-hidden", children: element }) }));
 }
 PromptContext.displayName = 'Prompt.Context';
 /** One fact in the context strip, with an icon before it. */
-function PromptContextItem({ onSelect, className, children, ...props }) {
+function PromptContextItem({ onSelect, className, children, render, ...props }) {
     const slots = promptVariants();
     if (onSelect) {
         return (_jsx("button", { type: "button", "data-slot": "prompt-context-item", onClick: onSelect, className: slots.contextItem({ className: [slots.contextButton(), className] }), children: children }));
     }
-    return (_jsx("span", { "data-slot": "prompt-context-item", className: slots.contextItem({ className }), ...props, children: children }));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        props: mergeProps({ 'data-slot': 'prompt-context-item', className: slots.contextItem({ className }), children: _jsx(_Fragment, { children: children }) }, props),
+    });
 }
 PromptContextItem.displayName = 'Prompt.ContextItem';
 /** A quiet line under the prompt. Keys written in `<kbd>` are drawn as keys. */
-function PromptHint({ className, children, ...props }) {
-    return (_jsx("p", { "data-slot": "prompt-hint", className: promptVariants().hint({ className }), ...props, children: children ?? (_jsxs(_Fragment, { children: [_jsx("kbd", { children: "Shift" }), " + ", _jsx("kbd", { children: "Enter" }), " for a new line"] })) }));
+function PromptHint({ className, children, render, ...props }) {
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        props: mergeProps({
+            'data-slot': 'prompt-hint',
+            className: promptVariants().hint({ className }),
+            children: (_jsx(_Fragment, { children: children ?? (_jsxs(_Fragment, { children: [_jsx("kbd", { children: "Shift" }), " + ", _jsx("kbd", { children: "Enter" }), " for a new line"] })) })),
+        }, props),
+    });
 }
 PromptHint.displayName = 'Prompt.Hint';
 /** The card that holds the text, the files and the footer. Files can be dropped on it. */
-function PromptField({ layout = 'stacked', className, onDragOver, onDragLeave, onDrop, ...props }) {
+function PromptField({ layout = 'stacked', className, onDragOver, onDragLeave, onDrop, render, ...props }) {
     const prompt = usePrompt('Prompt.Field');
     const hasFiles = (event) => [...event.dataTransfer.types].includes('Files');
-    return (_jsx("div", { ref: prompt.fieldRef, "data-slot": "prompt-field", "data-layout": layout, "data-status": prompt.status, "data-dragging": prompt.dragging ? '' : undefined, className: promptVariants().field({ className }), onDragOver: (event) => {
-            onDragOver?.(event);
-            if (prompt.disabled || !hasFiles(event))
-                return;
-            event.preventDefault();
-            event.dataTransfer.dropEffect = 'copy';
-            if (!prompt.dragging)
-                prompt.setDragging(true);
-        }, onDragLeave: (event) => {
-            onDragLeave?.(event);
-            // Leaving for a child of the field is not leaving the field.
-            if (!event.currentTarget.contains(event.relatedTarget))
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            ref: prompt.fieldRef,
+            'data-slot': 'prompt-field',
+            'data-layout': layout,
+            'data-status': prompt.status,
+            'data-dragging': prompt.dragging ? '' : undefined,
+            className: promptVariants().field({ className }),
+            onDragOver: (event) => {
+                onDragOver?.(event);
+                if (prompt.disabled || !hasFiles(event))
+                    return;
+                event.preventDefault();
+                event.dataTransfer.dropEffect = 'copy';
+                if (!prompt.dragging)
+                    prompt.setDragging(true);
+            },
+            onDragLeave: (event) => {
+                onDragLeave?.(event);
+                // Leaving for a child of the field is not leaving the field.
+                if (!event.currentTarget.contains(event.relatedTarget))
+                    prompt.setDragging(false);
+            },
+            onDrop: (event) => {
+                onDrop?.(event);
                 prompt.setDragging(false);
-        }, onDrop: (event) => {
-            onDrop?.(event);
-            prompt.setDragging(false);
-            if (prompt.disabled || !hasFiles(event))
-                return;
-            event.preventDefault();
-            prompt.addFiles(event.dataTransfer.files);
-        }, ...props }));
+                if (prompt.disabled || !hasFiles(event))
+                    return;
+                event.preventDefault();
+                prompt.addFiles(event.dataTransfer.files);
+            },
+        }, props),
+    });
 }
 PromptField.displayName = 'Prompt.Field';
 /** Where the message is written. Enter sends, Shift+Enter starts a new line, and pasted files are attached. */
@@ -462,22 +512,39 @@ function formatSize(bytes) {
 }
 const XIcon = () => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", children: _jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }));
 /** The files attached so far: images as thumbnails, anything else as a chip. Takes no room while there are none. */
-function PromptAttachments({ className, 'aria-label': ariaLabel = 'Attached files', ...props }) {
+function PromptAttachments({ className, 'aria-label': ariaLabel = 'Attached files', render, ...props }) {
     const prompt = usePrompt('Prompt.Attachments');
     const slots = promptVariants();
     if (prompt.attachments.length === 0)
         return null;
-    return (_jsx("ul", { "data-slot": "prompt-attachments", "aria-label": ariaLabel, className: slots.attachments({ className }), ...props, children: prompt.attachments.map(({ id, file, preview }) => (_jsxs("li", { className: slots.attachment({ className: preview ? slots.attachmentImage() : slots.attachmentFile() }), children: [preview ? (_jsx("img", { src: preview, alt: file.name, className: "size-full rounded-[inherit] object-cover" })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slots.attachmentGlyph(), children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slots.attachmentName(), children: file.name }), _jsx("span", { className: slots.attachmentMeta(), children: formatSize(file.size) })] })] })), _jsx("button", { type: "button", "aria-label": `Remove ${file.name}`, className: slots.attachmentRemove(), onClick: () => prompt.removeAttachment(id), children: _jsx(XIcon, {}) })] }, id))) }));
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        props: mergeProps({
+            'data-slot': 'prompt-attachments',
+            'aria-label': ariaLabel,
+            className: slots.attachments({ className }),
+            children: (_jsx(_Fragment, { children: prompt.attachments.map(({ id, file, preview }) => (_jsxs("li", { className: slots.attachment({ className: preview ? slots.attachmentImage() : slots.attachmentFile() }), children: [preview ? (_jsx("img", { src: preview, alt: file.name, className: "size-full rounded-[inherit] object-cover" })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: slots.attachmentGlyph(), children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }), _jsx("path", { d: "M14 3v5h5" })] }) }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: slots.attachmentName(), children: file.name }), _jsx("span", { className: slots.attachmentMeta(), children: formatSize(file.size) })] })] })), _jsx("button", { type: "button", "aria-label": `Remove ${file.name}`, className: slots.attachmentRemove(), onClick: () => prompt.removeAttachment(id), children: _jsx(XIcon, {}) })] }, id))) })),
+        }, props),
+    });
 }
 PromptAttachments.displayName = 'Prompt.Attachments';
 /** The row under the text: tools at the start, the submit button at the end. */
-function PromptFooter({ className, ...props }) {
-    return _jsx("div", { "data-slot": "prompt-footer", className: promptVariants().footer({ className }), ...props });
+function PromptFooter({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'prompt-footer', className: promptVariants().footer({ className }) }, props),
+    });
 }
 PromptFooter.displayName = 'Prompt.Footer';
 /** The tools at the start of the footer. Wraps onto a second line where it has to. */
-function PromptTools({ className, ...props }) {
-    return _jsx("div", { "data-slot": "prompt-tools", className: promptVariants().tools({ className }), ...props });
+function PromptTools({ className, render, ...props }) {
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({ 'data-slot': 'prompt-tools', className: promptVariants().tools({ className }) }, props),
+    });
 }
 PromptTools.displayName = 'Prompt.Tools';
 /** A round button in the footer, holding an icon. With `pressed`, it switches on and off. */
@@ -521,7 +588,9 @@ const PaperclipIcon = () => (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0
  */
 function PromptMenu({ label = 'Add', icon, children, side = 'top', align = 'start', width = 'auto', className, ...props }) {
     const prompt = usePrompt('Prompt.Menu');
-    return (_jsxs(Menu, { children: [_jsx(Menu.Trigger, { disabled: prompt.disabled, "aria-label": label, title: label, render: _jsx(Button, { "data-slot": "prompt-menu", variant: "outline", shape: "pill", size: "icon" }), className: promptVariants().menuTrigger(), children: icon ?? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) }), _jsx(Menu.Content, { side: side, align: align, anchor: width === 'field' ? prompt.fieldRef : undefined, className: [width === 'field' ? 'w-(--anchor-width) rounded-2xl p-1.5' : undefined, className].filter(Boolean).join(' ') || undefined, ...props, children: children })] }));
+    return (_jsxs(Menu, { children: [_jsx(Menu.Trigger, { disabled: prompt.disabled, "aria-label": label, title: label, render: _jsx(Button, { "data-slot": "prompt-menu", variant: "outline", shape: "pill", size: "icon" }), className: promptVariants().menuTrigger(), children: icon ?? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: _jsx("path", { d: "M12 5v14M5 12h14" }) })) }), _jsx(Menu.Content, { side: side, align: align, anchor: width === 'field' ? prompt.fieldRef : undefined, className: [width === 'field' ? 'w-(--anchor-width) rounded-2xl p-1.5' : undefined, className]
+                    .filter(Boolean)
+                    .join(' ') || undefined, ...props, children: children })] }));
 }
 PromptMenu.displayName = 'Prompt.Menu';
 /** The menu item that opens the file picker. */
@@ -627,16 +696,30 @@ function PromptTasks({ open, mode, title, expanded, defaultExpanded = false, onE
 }
 PromptTasks.displayName = 'Prompt.Tasks';
 /** One task in `Prompt.Tasks`. */
-function PromptTask({ status = 'pending', className, children, ...props }) {
+function PromptTask({ status = 'pending', className, children, render, ...props }) {
     const slots = promptVariants();
     const text = useShimmer(status === 'active');
-    return (_jsxs("li", { "data-status": status, className: slots.task({ className }), ...props, children: [_jsx("span", { className: slots.taskMark(), children: status === 'done' ? (_jsx(CheckCircle, { className: slots.taskDone() })) : status === 'active' ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.75", strokeLinecap: "round", className: "size-3.5 animate-spin text-foreground motion-reduce:animate-none", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) })) : status === 'error' ? (_jsx("span", { className: slots.taskError(), children: "!" })) : (_jsx("span", { className: slots.taskPending() })) }), _jsx("span", { ref: text, className: status === 'active'
-                    ? slots.statusText({ className: 'whitespace-normal' })
-                    : status === 'done'
-                        ? 'text-muted-foreground line-through decoration-muted-foreground/40'
-                        : status === 'error'
-                            ? 'text-destructive'
-                            : 'text-muted-foreground', children: children }), _jsx("span", { className: "sr-only", children: status === 'done' ? ', done' : status === 'active' ? ', in progress' : status === 'error' ? ', failed' : '' })] }));
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        props: mergeProps({
+            'data-status': status,
+            className: slots.task({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { className: slots.taskMark(), children: status === 'done' ? (_jsx(CheckCircle, { className: slots.taskDone() })) : status === 'active' ? (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.75", strokeLinecap: "round", className: "size-3.5 animate-spin text-foreground motion-reduce:animate-none", children: _jsx("path", { d: "M21 12a9 9 0 1 1-6.22-8.56" }) })) : status === 'error' ? (_jsx("span", { className: slots.taskError(), children: "!" })) : (_jsx("span", { className: slots.taskPending() })) }), _jsx("span", { ref: text, className: status === 'active'
+                            ? slots.statusText({ className: 'whitespace-normal' })
+                            : status === 'done'
+                                ? 'text-muted-foreground line-through decoration-muted-foreground/40'
+                                : status === 'error'
+                                    ? 'text-destructive'
+                                    : 'text-muted-foreground', children: children }), _jsx("span", { className: "sr-only", children: status === 'done'
+                            ? ', done'
+                            : status === 'active'
+                                ? ', in progress'
+                                : status === 'error'
+                                    ? ', failed'
+                                    : '' })] })),
+        }, props),
+    });
 }
 PromptTask.displayName = 'Prompt.Task';
 /**
@@ -644,18 +727,23 @@ PromptTask.displayName = 'Prompt.Task';
  * word, `/sum`. The arrow keys move through it, Enter or Tab chooses, Escape
  * puts it away.
  */
-function PromptCommands({ items, trigger = '/', onSelect, label = 'Commands', maxHeight = '12rem' }) {
+function PromptCommands({ items, trigger = '/', onSelect, label = 'Commands', maxHeight = '12rem', }) {
     const prompt = usePrompt('Prompt.Commands');
     const slots = promptVariants();
     const listId = useId();
     const [activeIndex, setActiveIndex] = useState(0);
     const [dismissed, setDismissed] = useState(null);
     const list = useRef(null);
-    const query = prompt.value.startsWith(trigger) && !/\s/.test(prompt.value) ? prompt.value.slice(trigger.length).toLowerCase() : null;
+    const query = prompt.value.startsWith(trigger) && !/\s/.test(prompt.value)
+        ? prompt.value.slice(trigger.length).toLowerCase()
+        : null;
     const matches = query === null
         ? []
         : items
-            .filter((item) => item.value.toLowerCase().includes(query) || String(item.label ?? '').toLowerCase().includes(query))
+            .filter((item) => item.value.toLowerCase().includes(query) ||
+            String(item.label ?? '')
+                .toLowerCase()
+                .includes(query))
             // Those whose name starts with what was typed come first.
             .sort((a, b) => Number(!a.value.toLowerCase().startsWith(query)) - Number(!b.value.toLowerCase().startsWith(query)));
     const open = matches.length > 0 && dismissed !== prompt.value;
@@ -733,7 +821,7 @@ const BAR_PITCH = 5;
  * has been heard so far, the sound as a wave scrolling to the left, how long
  * it has been, and buttons to throw it away or keep it.
  */
-function PromptRecorder({ transcript, placeholder = 'Listening…', onCancel, onDone, level, cancelLabel = 'Cancel recording', doneLabel = 'Finish recording', className, ...props }) {
+function PromptRecorder({ transcript, placeholder = 'Listening…', onCancel, onDone, level, cancelLabel = 'Cancel recording', doneLabel = 'Finish recording', className, render, ...props }) {
     const slots = promptVariants();
     // Starts on a low murmur rather than flat silence, so the wave is never a row of dots.
     const [levels, setLevels] = useState(() => Array.from({ length: BARS }, (_, i) => 0.12 + 0.06 * Math.sin(i * 1.7)));
@@ -778,7 +866,15 @@ function PromptRecorder({ transcript, placeholder = 'Listening…', onCancel, on
         };
     }, []);
     const time = `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
-    return (_jsxs("div", { "data-slot": "prompt-recorder", className: slots.recorder({ className }), ...props, children: [_jsx("p", { "aria-live": "polite", className: slots.recorderTranscript(), children: transcript || (_jsx("span", { ref: listening, className: slots.recorderListening(), children: placeholder })) }), _jsxs("div", { className: slots.recorderControls(), children: [_jsx(Button, { variant: "ghost", size: "icon", shape: "pill", "aria-label": cancelLabel, onClick: onCancel, children: _jsx(XIcon, {}) }), _jsx("div", { ref: wave, "aria-hidden": "true", className: slots.recorderWave(), children: levels.slice(-fits).map((value, index) => (_jsx("span", { className: slots.recorderBar(), style: { height: `${3 + value * 33}px` } }, index))) }), _jsxs("span", { role: "timer", "aria-label": `Recording, ${time}`, className: slots.recorderTime(), children: [_jsx("span", { className: slots.recorderDot() }), time] }), _jsx(Button, { shape: "pill", "aria-label": doneLabel, onClick: onDone, className: slots.recorderDone(), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) })] })] }));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        props: mergeProps({
+            'data-slot': 'prompt-recorder',
+            className: slots.recorder({ className }),
+            children: (_jsxs(_Fragment, { children: [_jsx("p", { "aria-live": "polite", className: slots.recorderTranscript(), children: transcript || (_jsx("span", { ref: listening, className: slots.recorderListening(), children: placeholder })) }), _jsxs("div", { className: slots.recorderControls(), children: [_jsx(Button, { variant: "ghost", size: "icon", shape: "pill", "aria-label": cancelLabel, onClick: onCancel, children: _jsx(XIcon, {}) }), _jsx("div", { ref: wave, "aria-hidden": "true", className: slots.recorderWave(), children: levels.slice(-fits).map((value, index) => (_jsx("span", { className: slots.recorderBar(), style: { height: `${3 + value * 33}px` } }, index))) }), _jsxs("span", { role: "timer", "aria-label": `Recording, ${time}`, className: slots.recorderTime(), children: [_jsx("span", { className: slots.recorderDot() }), time] }), _jsx(Button, { shape: "pill", "aria-label": doneLabel, onClick: onDone, className: slots.recorderDone(), children: _jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.25", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: "M20 6 9 17l-5-5" }) }) })] })] })),
+        }, props),
+    });
 }
 PromptRecorder.displayName = 'Prompt.Recorder';
 export const Prompt = Object.assign(PromptRoot, {

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

@@ -0,0 +1,124 @@
+/**
+ * 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 type { ComponentProps, CSSProperties, 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 RadioSize = 'sm' | 'md' | 'lg';
+export type RadioColor = 'primary' | 'success' | 'info' | 'destructive';
+export interface RadioGroupProps extends Omit<BaseRadioGroup.Props<string>, 'className'> {
+    /** Whether the radios stack or sit in a row. Also sets which arrow keys move the choice. Default `vertical`. */
+    orientation?: 'vertical' | 'horizontal';
+    className?: string;
+}
+/** Holds one value for the radios inside it. Takes `value`/`onValueChange` or `defaultValue`, and `name` for a form. */
+declare function RadioGroupRoot({ orientation, className, ...props }: RadioGroupProps): import("react").JSX.Element;
+declare namespace RadioGroupRoot {
+    var displayName: string;
+}
+export interface RadioProps extends Omit<BaseRadio.Root.Props<string>, 'className' | 'color'> {
+    /** Default `md`. */
+    size?: RadioSize;
+    /** The colour of the chosen radio. `primary` by default. */
+    color?: RadioColor;
+    /** What a screen reader calls it, when there is no visible label tied to it. */
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/** One option. `value` is what the group's value becomes when it is chosen. */
+declare function Radio({ size, color, label, className, ...props }: RadioProps): import("react").JSX.Element;
+declare namespace Radio {
+    var displayName: string;
+}
+export type RadioCardAppearance = 'outline' | 'filled' | 'dither';
+export interface RadioCardProps extends Omit<BaseRadio.Root.Props<string>, 'className' | 'color' | 'children'> {
+    /**
+     * How the chosen card is marked: a ring, a tint, or a dither ramp from the
+     * far edge. The ramp draws where `RadioGroup.CardAside` would sit, so leave
+     * the aside out of a `dither` card. Default `outline`.
+     */
+    appearance?: RadioCardAppearance;
+    /** The colour the chosen card is marked in. `primary` by default. */
+    color?: RadioColor;
+    className?: string;
+    style?: CSSProperties;
+    /** `RadioGroup.CardTitle`, `RadioGroup.CardDescription` and `RadioGroup.CardAside`. */
+    children?: ReactNode;
+}
+/** One option drawn as a card, with its radio inside. The whole card is pressed to choose it. */
+declare function RadioCard({ appearance, color, className, children, ...props }: RadioCardProps): import("react").JSX.Element;
+declare namespace RadioCard {
+    var displayName: string;
+}
+/** Holds a card's title and description, beside the radio. */
+declare function RadioCardBody({ className, render, ...props }: ComponentProps<'span'> & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace RadioCardBody {
+    var displayName: string;
+}
+/** The option's name. */
+declare function RadioCardTitle({ className, render, ...props }: ComponentProps<'span'> & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace RadioCardTitle {
+    var displayName: string;
+}
+/** A line under the name saying what the option means. */
+declare function RadioCardDescription({ className, render, ...props }: ComponentProps<'span'> & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace RadioCardDescription {
+    var displayName: string;
+}
+/** Pushed to the far end of the card: a price, a duration, a badge. */
+declare function RadioCardAside({ className, render, ...props }: ComponentProps<'span'> & RenderProp<'span'>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare namespace RadioCardAside {
+    var displayName: string;
+}
+export declare const RadioGroup: typeof RadioGroupRoot & {
+    Item: typeof Radio;
+    Card: typeof RadioCard;
+    CardBody: typeof RadioCardBody;
+    CardTitle: typeof RadioCardTitle;
+    CardDescription: typeof RadioCardDescription;
+    CardAside: typeof RadioCardAside;
+};
+export { Radio, Radio as RadioGroupItem, RadioCard, RadioCard as RadioGroupCard, RadioCardBody as RadioGroupCardBody, RadioCardTitle as RadioGroupCardTitle, RadioCardDescription as RadioGroupCardDescription, RadioCardAside as RadioGroupCardAside, };