@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/radio-group/behaviour.d.ts

@@ -0,0 +1,11 @@
+import { setSelectedValue, type RadioGroupState } from "../state/radio-group.js";
+/** Native validation of the group (RA useRadio `useFormValidation` on every radio). */
+export declare function syncRadioValidity(state: RadioGroupState, input: HTMLInputElement): void;
+/** `change` on a radio (`value` = the radio value). Read-only: restore the selected radio. */
+export declare function radioChange(state: RadioGroupState, value: string, event: Event): void;
+export declare function radioFocus(state: RadioGroupState, value: string, event: Event): void;
+/** RA useRadioGroup `onBlur` (focus-within): forget the last focused radio when focus leaves the group. */
+export declare function radioGroupFocusOut(state: RadioGroupState, event: FocusEvent): void;
+export declare function radioInvalid(state: RadioGroupState, event: Event): void;
+/** Programmatic selection (RA `state.setSelectedValue`). */
+export { setSelectedValue };

package/radio-group/behaviour.js

@@ -0,0 +1,85 @@
+// Ported from react-aria `useRadioGroup` + `useRadio` (packages/react-aria/src/radio/useRadioGroup.ts,
+// src/radio/useRadio.ts), Apache-2.0, © Adobe.
+// Rivet: native radios sharing a name give arrow-key navigation (wrap, skip disabled, select on arrow),
+// the single tab stop and form submission without JS; these handlers keep the state, read-only and
+// validation in step.
+import { untrack } from "@rivetjs/reactivity";
+import { DEFAULT_VALIDATION_RESULT, clearServerErrors, commitValidation, realtimeValidation, resetValidation, updateValidation, } from "../state/form-validation.js";
+import { nativeValidity, onFormReset, validationInvalid } from "../form/behaviour.js";
+import { isRadioGroupDisabled, isRadioGroupReadOnly, setLastFocusedValue, setSelectedValue } from "../state/radio-group.js";
+const radios = (input) => {
+    const group = input.closest('[role="radiogroup"]');
+    return group ? [...group.querySelectorAll('input[type="radio"]')] : [input];
+};
+/** Native validation of the group (RA useRadio `useFormValidation` on every radio). */
+export function syncRadioValidity(state, input) {
+    const { validation } = state;
+    onFormReset(state, input, () => {
+        if (!state.fixed)
+            state.selectedValue.set(state.defaultSelectedValue);
+        resetValidation(validation);
+    });
+    if (validation.behavior !== "native")
+        return;
+    const realtime = untrack(() => realtimeValidation(validation));
+    const message = realtime.isInvalid ? realtime.validationErrors.join(" ") || "Invalid value." : "";
+    const inputs = radios(input);
+    for (const el of inputs) {
+        if (el.disabled)
+            continue;
+        el.setCustomValidity(message);
+        if (!el.hasAttribute("title"))
+            el.title = "";
+    }
+    if (!realtime.isInvalid) {
+        const invalid = inputs.filter((el) => !el.disabled && !el.validity.valid).map(nativeValidity);
+        updateValidation(validation, invalid.length ? invalid[0] : DEFAULT_VALIDATION_RESULT);
+    }
+}
+/** `change` on a radio (`value` = the radio value). Read-only: restore the selected radio. */
+export function radioChange(state, value, event) {
+    const input = event.currentTarget;
+    event.stopPropagation();
+    if (isRadioGroupReadOnly(state) || isRadioGroupDisabled(state)) {
+        const selected = untrack(state.selectedValue);
+        for (const el of radios(input))
+            el.checked = el.value === selected;
+        return;
+    }
+    if (!input.checked)
+        return;
+    clearServerErrors(state.validation);
+    // RA setSelectedValue commits; sync the custom validity first (RA layout effect order).
+    if (untrack(state.selectedValue) !== value) {
+        if (!state.fixed)
+            state.selectedValue.set(value);
+        state.onChange?.(value);
+        // Controlled (plain / accessor value): the radios show the prop, not the click (React restores a controlled
+        // input) — re-sync after the caller's update has flushed.
+        if (state.fixed)
+            queueMicrotask(() => restoreRadios(state, input));
+    }
+    syncRadioValidity(state, input);
+    commitValidation(state.validation);
+}
+function restoreRadios(state, input) {
+    const selected = untrack(state.selectedValue);
+    for (const el of radios(input))
+        el.checked = el.value === selected;
+}
+export function radioFocus(state, value, event) {
+    setLastFocusedValue(state, value);
+    syncRadioValidity(state, event.currentTarget);
+}
+/** RA useRadioGroup `onBlur` (focus-within): forget the last focused radio when focus leaves the group. */
+export function radioGroupFocusOut(state, event) {
+    const group = event.currentTarget;
+    if (!group.contains(event.relatedTarget))
+        setLastFocusedValue(state, null);
+}
+export function radioInvalid(state, event) {
+    syncRadioValidity(state, event.currentTarget);
+    validationInvalid(state.validation, event);
+}
+/** Programmatic selection (RA `state.setSelectedValue`). */
+export { setSelectedValue };

package/radio-group/index.d.ts

@@ -0,0 +1,82 @@
+import { type Signal } from "@rivetjs/reactivity";
+import type { Content, JSX, Slot } from "@rivetjs/runtime/jsx-runtime";
+import { type MaybeAccessor, type ValidationBehavior, type ValidationFunction, type ValidationResult } from "../state/form-validation.js";
+import { type GlobalDOMAttributes } from "@rivetjs/cdk/dom-props";
+import { type RadioGroupPartsProps } from "./parts.jsx";
+export type { RadioGroupState } from "../state/radio-group.js";
+export { Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroupContext, RadioGroupStateContext, radioProps, type AriaRadioProps, type RadioAria, type RadioButtonProps, type RadioButtonRenderProps, type RadioFieldProps, type RadioFieldRenderProps, type RadioGroupData, type RadioGroupPartsProps, type RadioGroupRenderProps, type RadioProps, type RadioRenderProps, } from "./parts.jsx";
+/** One radio (RAC `<Radio>` props): global DOM events / attributes go on its `<label>`, focus / key events (RA FocusableProps) on its input. */
+export interface RadioItem extends GlobalDOMAttributes<HTMLLabelElement> {
+    readonly value: string;
+    readonly label?: string;
+    readonly isDisabled?: boolean;
+    /** Help text of this radio (linked with aria-describedby). */
+    readonly description?: string;
+    /** Radio input id (default generated). */
+    readonly id?: string;
+    readonly onFocus?: (event: FocusEvent) => void;
+    readonly onBlur?: (event: FocusEvent) => void;
+    readonly onFocusChange?: (isFocused: boolean) => void;
+    readonly onKeyDown?: (event: KeyboardEvent) => void;
+    readonly onKeyUp?: (event: KeyboardEvent) => void;
+    /** @deprecated use `isDisabled` */ readonly disabled?: boolean;
+}
+/** Props of the data-driven preset (`items`). */
+export interface RadioGroupItemsProps extends GlobalDOMAttributes<HTMLDivElement> {
+    /** Visible group label (a `<span>`, referenced by aria-labelledby). */
+    label?: Content;
+    items: readonly RadioItem[];
+    /** Selected value (controlled): a two-way Signal, or a plain value (`value={v()}` stays live); or `defaultValue`. */
+    value?: Signal<string | null> | string | null;
+    defaultValue?: string | null;
+    onChange?: (value: string) => void;
+    /** Form field name (default: a generated id). */
+    name?: string;
+    form?: string;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    validate?: ValidationFunction<string | null>;
+    /** @default "native" (or the enclosing `<Form>`'s) */
+    validationBehavior?: ValidationBehavior;
+    description?: Content;
+    errorMessage?: Content | ((validation: ValidationResult) => Content);
+    /** @default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    /** Focus entered the group (RA FocusEvents on the group: focus-within). */
+    onFocus?: (event: FocusEvent) => void;
+    /** Focus left the group. */
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocusWithin: boolean) => void;
+    /** @default "rv-RadioGroup" */
+    class?: string;
+    /** Radio (label) class, default `rv-Radio`. */
+    itemClass?: string;
+    inputClass?: string;
+    labelClass?: string;
+    descriptionClass?: string;
+    errorClass?: string;
+    /** Radio content (default: the item label). */
+    children?: Slot<[item: () => RadioItem]>;
+    /** @deprecated use `isRequired` */ required?: boolean;
+    /** @deprecated use `isDisabled` */ disabled?: boolean;
+    /** @deprecated use `aria-describedby` */ describedBy?: string;
+}
+/**
+ * A radio group allows a user to select a single item from a list of mutually exclusive options. With `items`: the data-driven preset
+ * (below); without: the RAC compound form (`<RadioField>` / `<RadioButton>` / `<Radio>` children, `./parts.tsx`).
+ */
+export declare function RadioGroup(props: RadioGroupPartsProps & {
+    items?: undefined;
+}): JSX.Element;
+export declare function RadioGroup(props: RadioGroupItemsProps): JSX.Element;
+/** `RadioGroup` props: the RAC compound props (`./parts.tsx`, no `items`) or the data-driven preset's (`RadioGroupItemsProps`). */
+export type RadioGroupProps = (RadioGroupPartsProps & {
+    items?: undefined;
+}) | RadioGroupItemsProps;

package/radio-group/index.jsx

@@ -0,0 +1,142 @@
+// Ported from react-aria-components `RadioGroup` / `Radio` + react-aria `useRadioGroup`, `useRadio` and
+// react-stately `useRadioGroupState` (packages/react-aria-components/src/RadioGroup.tsx,
+// packages/react-aria/src/radio/*), Apache-2.0, © Adobe.
+// <div role=radiogroup> + a <span> label + native radios sharing a name: arrow keys (wrap, skip
+// disabled, select on arrow), the single tab stop and form submission are native (zero JS).
+// Two forms: RAC compound children (`./parts.tsx`: RadioGroup / RadioField / RadioButton / Radio, contexts) and the Rivet data-driven
+// preset (`items` + a render slot, this file).
+// Native radios stay visible by default (`inputClass` with a visually hidden class of your own, e.g. Tailwind `sr-only`, hides them).
+import { For, Provider } from "@rivetjs/runtime/dom";
+import { untrack } from "@rivetjs/reactivity";
+import { createId } from "@rivetjs/cdk/id";
+import { displayValidation } from "../state/form-validation.js";
+import { createRadioGroupState } from "../state/radio-group.js";
+import { useValidationBehavior, useValidationErrors } from "../form/index.jsx";
+import { validityError } from "../form/behaviour.js";
+import { fieldAria } from "../label/behaviour.js";
+import { FieldError, FieldErrorContext } from "../form/field-error.jsx";
+import { errorText, fieldDescribedBy } from "../text-field/fields.js";
+import { globalDOMProps } from "@rivetjs/cdk/dom-props";
+import { radioChange, radioFocus, radioGroupFocusOut, radioInvalid } from "./behaviour.js";
+import { SharedElementTransition } from "../shared-element-transition/transition.jsx";
+import { SelectionIndicatorContext } from "../selection-indicator/context.js";
+import { RadioGroupParts } from "./parts.jsx";
+import { liveOptions } from "../utils/live.jsx";
+export { Radio, RadioButton, RadioContext, RadioField, RadioFieldContext, RadioGroupContext, RadioGroupStateContext, radioProps, } from "./parts.jsx";
+export function RadioGroup(props) {
+    // Live props (P5): the dispatch reads `items` once; the parts render by a direct call (a component spread of a live
+    // props object re-created the region on a resumed page: checkbox/CLAUDE.md). The items preset reads its props once.
+    return untrack(() => (props.items === undefined ? RadioGroupParts(props) : <RadioGroupItems {...props}/>));
+}
+function RadioGroupItems(props) {
+    const behaviour = useValidationBehavior(props.validationBehavior);
+    const isDisabled = props.isDisabled ?? props.disabled ?? false;
+    const isReadOnly = props.isReadOnly ?? false;
+    const isRequired = props.isRequired ?? props.required ?? false;
+    const state = createRadioGroupState({
+        // Live props: a controlled `value={v()}` stays live (an accessor into the state).
+        value: liveOptions(props, [], ["value"]).value,
+        defaultValue: props.defaultValue,
+        onChange: props.onChange,
+        name: props.name,
+        isDisabled,
+        isReadOnly,
+        isRequired,
+        isInvalid: props.isInvalid,
+        validate: props.validate,
+        validationBehavior: behaviour,
+        validationErrors: useValidationErrors(),
+    });
+    const { items, children: render, errorMessage } = props;
+    const id = props.id ?? createId();
+    const ids = fieldAria({
+        id,
+        label: props.label,
+        labelElementType: "span",
+        description: props.description,
+        "aria-label": props["aria-label"],
+        "aria-labelledby": props["aria-labelledby"],
+        "aria-describedby": [props["aria-describedby"], props.describedBy].filter(Boolean).join(" ") || undefined,
+    });
+    const orientation = props.orientation ?? "vertical";
+    const itemClass = props.itemClass ?? "rv-Radio";
+    const invalid = () => displayValidation(state.validation).isInvalid;
+    const showsError = () => errorText(state, errorMessage) !== undefined;
+    const groupDescription = ids.descriptionId;
+    const { onFocus, onBlur, onFocusChange } = props;
+    const dom = globalDOMProps(props);
+    const className = props.class;
+    const ariaDetails = props["aria-details"];
+    return (<div {...dom} id={id} role="radiogroup" class={className ?? "rv-RadioGroup"} aria-orientation={orientation} aria-invalid={invalid() ? "true" : undefined} aria-disabled={isDisabled ? "true" : undefined} aria-readonly={isReadOnly ? "true" : undefined} aria-required={isRequired ? "true" : undefined} aria-label={ids.fieldProps["aria-label"]} aria-labelledby={ids.fieldProps["aria-labelledby"]} aria-describedby={fieldDescribedBy(state, ids, errorMessage)} aria-details={ariaDetails} data-orientation={orientation} data-disabled={isDisabled || undefined} data-readonly={isReadOnly || undefined} data-required={isRequired || undefined} data-invalid={invalid() ? "true" : undefined} onFocusIn={onFocus || onFocusChange
+            ? (event) => {
+                const group = event.currentTarget;
+                if (group.contains(event.relatedTarget))
+                    return;
+                onFocus?.(event);
+                onFocusChange?.(true);
+            }
+            : undefined} onFocusOut={(event) => {
+            radioGroupFocusOut(state, event);
+            if (!(onBlur || onFocusChange) || event.currentTarget.contains(event.relatedTarget))
+                return;
+            onBlur?.(event);
+            onFocusChange?.(false);
+        }}>
+      {props.label != null ? (<span id={ids.labelProps.id} class={props.labelClass ?? "rv-Label"} data-slot="label">
+          {props.label}
+        </span>) : null}
+      {/* RAC RadioGroup: the radios share one SharedElementTransition scope (an animated SelectionIndicator moves between them). */}
+      <SharedElementTransition>
+        <For each={() => items} by={(item) => item.value}>
+          {(item) => {
+            const option = item();
+            const disabled = isDisabled || !!(option.isDisabled ?? option.disabled);
+            const inputId = option.id ?? createId();
+            const descriptionId = option.description ? inputId + "-description" : undefined;
+            const itemDom = globalDOMProps(option, ["onMouseDown"]);
+            const valueProp = option.value;
+            return (<label {...itemDom} onMouseDown={(event) => {
+                    // RAC Radio mergeProps(DOMProps, labelProps): the user's handler first, then RA useRadio's
+                    // "Prevent label from being focused when mouse down on it" (the click still focuses the input).
+                    // Not for a press on the preset's visible native radio itself: canceling its mousedown cancels its
+                    // focus (RA's input usePress focuses it on pointerdown), so arrow keys after a click had no target.
+                    option.onMouseDown?.(event);
+                    if (!(event.target instanceof HTMLInputElement))
+                        event.preventDefault();
+                }} class={itemClass} data-selected={state.selectedValue() === valueProp ? "true" : undefined} data-disabled={disabled || undefined} data-readonly={isReadOnly || undefined} data-invalid={invalid() ? "true" : undefined} data-required={isRequired || undefined}>
+                <input type="radio" id={inputId} class={props.inputClass} name={state.name} form={props.form} value={option.value} disabled={disabled || undefined} required={(isRequired && behaviour === "native") || undefined} aria-describedby={[descriptionId, invalid() && showsError() ? ids.errorMessageId : undefined, groupDescription].filter(Boolean).join(" ") || undefined} data-rv-error={validityError(state.validation)} checked={state.selectedValue() === option.value} onChange={(event) => radioChange(state, option.value, event)} onFocus={(event) => {
+                    radioFocus(state, option.value, event);
+                    option.onFocus?.(event);
+                    option.onFocusChange?.(true);
+                }} onBlur={option.onBlur || option.onFocusChange
+                    ? (event) => {
+                        option.onBlur?.(event);
+                        option.onFocusChange?.(false);
+                    }
+                    : undefined} onKeyDown={option.onKeyDown ? (event) => option.onKeyDown(event) : undefined} onKeyUp={option.onKeyUp ? (event) => option.onKeyUp(event) : undefined} onInvalid={(event) => radioInvalid(state, event)}/>
+                {render ? (
+                // RAC Radio: `SelectionIndicatorContext` around the radio content (`isSelected` an accessor).
+                <Provider token={SelectionIndicatorContext} value={{ isSelected: () => state.selectedValue() === valueProp }}>
+                    {render(item)}
+                  </Provider>) : (option.label)}
+                {descriptionId ? (<span id={descriptionId} class={props.descriptionClass ?? "rv-Text"} data-slot="description">
+                    {option.description}
+                  </span>) : null}
+              </label>);
+        }}
+        </For>
+      </SharedElementTransition>
+      {props.description != null ? (<span id={ids.descriptionId} class={props.descriptionClass ?? "rv-Text"} data-slot="description">
+          {props.description}
+        </span>) : null}
+      <Provider token={FieldErrorContext} value={() => displayValidation(state.validation)}>
+        <FieldError id={ids.errorMessageId} class={props.errorClass ?? "rv-FieldError"}>
+          {typeof errorMessage === "function"
+            ? () => errorMessage(displayValidation(state.validation))
+            : errorMessage === undefined
+                ? undefined
+                : () => errorMessage}
+        </FieldError>
+      </Provider>
+    </div>);
+}

package/radio-group/parts.d.ts

@@ -0,0 +1,223 @@
+import { type MaybeAccessor } from "../state/form-validation.js";
+import { type RadioGroupState, type RadioGroupStateOptions } from "../state/radio-group.js";
+import { type HoverEvents } from "../interactions/hover.jsx";
+import { type PressEvents } from "../interactions/press.jsx";
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type InputRef, type PropBag } from "../checkbox/behaviour.jsx";
+import { type ClassNameOrFunction, type ContextValue, type RACValidation, type RefValue, type RenderProps, type SlotId, type SlotProps } from "../slots/index.jsx";
+export type Orientation = "horizontal" | "vertical";
+/** RA `AriaRadioGroupProps` + RAC `RadioGroupProps` (compound form). */
+export interface RadioGroupPartsProps extends Omit<RadioGroupStateOptions, "validationBehavior" | "validationErrors" | "isInvalid">, RACValidation, RenderProps<RadioGroupRenderProps>, DOMRenderProps<"div", RadioGroupRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onFocus" | "onBlur"> {
+    /** @default "vertical" */
+    orientation?: Orientation;
+    /** Whether the value is invalid (a value, or an accessor that stays live). */
+    isInvalid?: MaybeAccessor<boolean | undefined>;
+    form?: string;
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    "aria-errormessage"?: string;
+    /** Focus entered the group (RA FocusEvents on the group: focus-within). */
+    onFocus?: (event: FocusEvent) => void;
+    /** Focus left the group. */
+    onBlur?: (event: FocusEvent) => void;
+    onFocusChange?: (isFocusWithin: boolean) => void;
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-RadioGroup'
+     */
+    class?: ClassNameOrFunction<RadioGroupRenderProps>;
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RA `AriaRadioProps`. */
+export interface AriaRadioProps extends PressEvents {
+    /** The value of the radio button, used when submitting an HTML form. */
+    value: string;
+    /** Whether the radio button is disabled (a value, or an accessor that stays live). */
+    isDisabled?: boolean | (() => boolean | undefined);
+    /** The label content (RA: whether there is one; only its presence matters). */
+    children?: unknown;
+    id?: string;
+    autoFocus?: boolean;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+    "aria-details"?: string;
+    onFocus?: (e: FocusEvent) => void;
+    onBlur?: (e: FocusEvent) => void;
+    onFocusChange?: (isFocused: boolean) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyUp?: (e: KeyboardEvent) => void;
+}
+export interface RadioProps extends Omit<AriaRadioProps, "children">, HoverEvents, RenderProps<RadioRenderProps>, DOMRenderProps<"label", RadioRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, "onClick" | "style" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-Radio'
+     */
+    class?: ClassNameOrFunction<RadioRenderProps>;
+    /** A ref for the HTML input element. */
+    inputRef?: InputRef;
+    ref?: RefValue<HTMLLabelElement>;
+}
+export interface RadioFieldProps extends Omit<AriaRadioProps, "children">, RenderProps<RadioFieldRenderProps>, DOMRenderProps<"div", RadioFieldRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, "onClick" | "style" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-RadioField'
+     */
+    class?: ClassNameOrFunction<RadioFieldRenderProps>;
+    /** A ref for the HTML input element. */
+    inputRef?: InputRef;
+    ref?: RefValue<HTMLDivElement>;
+}
+export interface RadioButtonProps extends HoverEvents, RenderProps<RadioButtonRenderProps>, DOMRenderProps<"label", RadioButtonRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLLabelElement>, "onClick" | "style"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-RadioButton'
+     */
+    class?: ClassNameOrFunction<RadioButtonRenderProps>;
+    ref?: RefValue<HTMLLabelElement>;
+}
+export interface RadioGroupRenderProps {
+    /**
+     * The orientation of the radio group.
+     *
+     * @selector [data-orientation="horizontal | vertical"]
+     */
+    orientation: () => Orientation;
+    /**
+     * Whether the radio group is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the radio group is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the radio group is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+    /**
+     * Whether the radio group is invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /** State of the radio group. */
+    state: RadioGroupState;
+}
+export interface RadioFieldRenderProps {
+    /**
+     * Whether the radio is selected.
+     *
+     * @selector [data-selected]
+     */
+    isSelected: () => boolean;
+    /**
+     * Whether the radio is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the radio is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the radio is invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /**
+     * Whether the radio is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+}
+export interface RadioRenderProps extends RadioFieldRenderProps {
+    /**
+     * Whether the radio is currently hovered with a mouse.
+     *
+     * @selector [data-hovered]
+     */
+    isHovered: () => boolean;
+    /**
+     * Whether the radio is currently in a pressed state.
+     *
+     * @selector [data-pressed]
+     */
+    isPressed: () => boolean;
+    /**
+     * Whether the radio is focused, either via a mouse or keyboard.
+     *
+     * @selector [data-focused]
+     */
+    isFocused: () => boolean;
+    /**
+     * Whether the radio is keyboard focused.
+     *
+     * @selector [data-focus-visible]
+     */
+    isFocusVisible: () => boolean;
+}
+export interface RadioButtonRenderProps extends RadioRenderProps {
+}
+/** RAC `RadioGroupContext`. */
+export declare const RadioGroupContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<RadioGroupPartsProps>, HTMLDivElement>>;
+/** RAC `RadioContext`. */
+export declare const RadioContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<RadioProps>, HTMLLabelElement>>;
+/** RAC `RadioFieldContext`. */
+export declare const RadioFieldContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<RadioFieldProps>, HTMLDivElement>>;
+/** RAC `RadioGroupStateContext`. */
+export declare const RadioGroupStateContext: import("@rivetjs/reactivity").Context<RadioGroupState | null>;
+/** RA `radioGroupData` entry: kept on the group state (`state.data`). */
+export interface RadioGroupData {
+    form?: string;
+    descriptionId: SlotId;
+    errorMessageId: SlotId;
+    validationBehavior: "aria" | "native";
+}
+/** RA `RadioAria`. */
+export interface RadioAria {
+    labelProps: PropBag;
+    inputProps: PropBag;
+    descriptionProps: {
+        id: SlotId;
+    };
+    isSelected: () => boolean;
+    isPressed: () => boolean;
+    isDisabled: () => boolean;
+}
+export declare function RadioGroupParts(props: RadioGroupPartsProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/** RA `useRadio`: the label / input bags of one radio of `state`. */
+export declare function radioProps(props: AriaRadioProps, state: RadioGroupState, inputRef: InputRef): RadioAria;
+/**
+ * A RadioField represents an individual option within a radio group, containing a RadioButton and optional description.
+ */
+export declare function RadioField(props: RadioFieldProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/**
+ * A radio represents an individual option within a radio group.
+ *
+ * @deprecated Use RadioField + RadioButton instead.
+ */
+export declare function Radio(props: RadioProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;
+/**
+ * A RadioButton is the clickable area of a radio, including the indicator and label.
+ */
+export declare function RadioButton(props: RadioButtonProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement;