@wix/site-ui 1.106.0 → 1.107.0

package/dist/Radio/index.css

@@ -10,15 +10,18 @@
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
-  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
-  display: flex;
+  transition: border-color .2s linear;
+  display: inline-flex;
 }
 
-.root-Lal8hj:hover, .root-Lal8hj:focus-visible {
+.root-Lal8hj:hover {
+  border-color: var(--wst-paragraph-2-color, #000);
+}
+
+.root-Lal8hj:focus-visible {
   border-color: var(--wst-paragraph-2-color, #000);
   outline: 2px solid var(--wst-links-and-actions-color, #116dff);
   outline-offset: 2px;
-  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
 }
 
 .root-Lal8hj[data-checked] {
@@ -41,7 +44,7 @@
   opacity: 0;
   background-color: #0000;
   border-radius: 50%;
-  transition: background-color .2s linear, border-color .2s linear, border-width .2s linear, border-radius .2s linear;
+  transition: transform .2s linear, opacity .2s linear, background-color .2s linear;
   transform: scale(0);
 }
 

package/dist/Radio/index.d.ts

@@ -81,10 +81,10 @@ declare interface NonNativeButtonProps {
 }
 
 export declare const Radio: {
+    Root: typeof Root;
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<RadioIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Root: typeof Root;
 };
 
 export declare namespace Radio_2 {

package/dist/Radio/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
-import { NOOP, EMPTY_OBJECT, useMergedRefs, useRenderElement, esm_formatErrorMessage } from "../8272.js";
 import { transitionStatusMapping, useOpenChangeComplete, useTransitionStatus } from "../880.js";
 import { useLabelableContext, fieldValidityMapping, useFieldRootContext } from "../1477.js";
+import { esm_formatErrorMessage, EMPTY_OBJECT, useMergedRefs, useRenderElement, NOOP } from "../8272.js";
 import { useRadioGroupContext } from "../1279.js";
 import { useFieldItemContext } from "../1457.js";
 import { useStableCallback } from "../7541.js";
@@ -18,13 +18,6 @@ import { serializeValue } from "../5778.js";
 import { createChangeEventDetails } from "../4768.js";
 import { CompositeItem } from "../951.js";
 import * as __rspack_external_react from "react";
-const RadioRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
-if ("production" !== process.env.NODE_ENV) RadioRootContext.displayName = "RadioRootContext";
-function useRadioRootContext() {
-    const value = __rspack_external_react.useContext(RadioRootContext);
-    if (void 0 === value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>.' : esm_formatErrorMessage(52));
-    return value;
-}
 let RadioRootDataAttributes_RadioRootDataAttributes = /*#__PURE__*/ function(RadioRootDataAttributes) {
     RadioRootDataAttributes["checked"] = "data-checked";
     RadioRootDataAttributes["unchecked"] = "data-unchecked";
@@ -51,37 +44,13 @@ const stateAttributesMapping = {
     ...transitionStatusMapping,
     ...fieldValidityMapping
 };
-const RadioIndicator_RadioIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
-    const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
-    const rootState = useRadioRootContext();
-    const rendered = rootState.checked;
-    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
-    const state = {
-        ...rootState,
-        transitionStatus
-    };
-    const indicatorRef = __rspack_external_react.useRef(null);
-    const shouldRender = keepMounted || mounted;
-    const element = useRenderElement('span', componentProps, {
-        ref: [
-            forwardedRef,
-            indicatorRef
-        ],
-        state,
-        props: elementProps,
-        stateAttributesMapping: stateAttributesMapping
-    });
-    useOpenChangeComplete({
-        open: rendered,
-        ref: indicatorRef,
-        onComplete () {
-            if (!rendered) setMounted(false);
-        }
-    });
-    if (!shouldRender) return null;
-    return element;
-});
-if ("production" !== process.env.NODE_ENV) RadioIndicator_RadioIndicator.displayName = "RadioIndicator";
+const RadioRootContext = /*#__PURE__*/ __rspack_external_react.createContext(void 0);
+if ("production" !== process.env.NODE_ENV) RadioRootContext.displayName = "RadioRootContext";
+function useRadioRootContext() {
+    const value = __rspack_external_react.useContext(RadioRootContext);
+    if (void 0 === value) throw new Error("production" !== process.env.NODE_ENV ? 'Base UI: RadioRootContext is missing. Radio parts must be placed within <Radio.Root>.' : esm_formatErrorMessage(52));
+    return value;
+}
 const RadioRoot_RadioRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
     const { render, className, disabled: disabledProp = false, readOnly: readOnlyProp = false, required: requiredProp = false, 'aria-labelledby': ariaLabelledByProp, value, inputRef: inputRefProp, nativeButton = false, id: idProp, style, ...elementProps } = componentProps;
     const groupContext = useRadioGroupContext();
@@ -249,6 +218,37 @@ const RadioRoot_RadioRoot = /*#__PURE__*/ __rspack_external_react.forwardRef(fun
     });
 });
 if ("production" !== process.env.NODE_ENV) RadioRoot_RadioRoot.displayName = "RadioRoot";
+const RadioIndicator_RadioIndicator = /*#__PURE__*/ __rspack_external_react.forwardRef(function(componentProps, forwardedRef) {
+    const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
+    const rootState = useRadioRootContext();
+    const rendered = rootState.checked;
+    const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+    const state = {
+        ...rootState,
+        transitionStatus
+    };
+    const indicatorRef = __rspack_external_react.useRef(null);
+    const shouldRender = keepMounted || mounted;
+    const element = useRenderElement('span', componentProps, {
+        ref: [
+            forwardedRef,
+            indicatorRef
+        ],
+        state,
+        props: elementProps,
+        stateAttributesMapping: stateAttributesMapping
+    });
+    useOpenChangeComplete({
+        open: rendered,
+        ref: indicatorRef,
+        onComplete () {
+            if (!rendered) setMounted(false);
+        }
+    });
+    if (!shouldRender) return null;
+    return element;
+});
+if ("production" !== process.env.NODE_ENV) RadioIndicator_RadioIndicator.displayName = "RadioIndicator";
 const Radio_module = {
     root: "root-Lal8hj",
     indicator: "indicator-YyFvol"
@@ -258,23 +258,23 @@ const RadioSize = {
     medium: 16,
     large: 20
 };
-const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioIndicator_RadioIndicator, {
-        ref: ref,
-        className: clsx(Radio_module.indicator, className),
-        ...props
-    }));
 function Root({ className, size = RadioSize.medium, style, ...props }) {
     return /*#__PURE__*/ jsx(RadioRoot_RadioRoot, {
         ...props,
-        className: clsx(Radio_module.root, className),
+        className: clsx(Radio_module.root, className, 'has-custom-focus'),
         style: {
             '--radio-size': `${size}px`,
             ...style
         }
     });
 }
+const Indicator = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(RadioIndicator_RadioIndicator, {
+        ref: ref,
+        className: clsx(Radio_module.indicator, className),
+        ...props
+    }));
 const Radio = {
-    Indicator: Indicator,
-    Root: Root
+    Root: Root,
+    Indicator: Indicator
 };
 export { Radio, RadioSize };

package/dist/RadioField/index.css

@@ -0,0 +1,87 @@
+.fieldItem-RyE1Xd {
+  align-items: center;
+  gap: 12px;
+  min-height: 24px;
+  display: flex;
+}
+
+.fieldItem-RyE1Xd .fieldLabel-3Ws24V {
+  font: var(--wst-paragraph-2-font);
+  cursor: pointer;
+  margin-bottom: 0;
+}
+
+.fieldItem-RyE1Xd:has( > [role="radio"][data-disabled]) .fieldLabel-3Ws24V {
+  color: var(--wst-system-disabled-color, #939393);
+  cursor: default;
+}
+
+.fieldItem-RyE1Xd:has( > [role="radio"][data-readonly]) .fieldLabel-3Ws24V {
+  cursor: default;
+}
+
+.fieldItem-RyE1Xd[data-variant="box"] {
+  box-sizing: border-box;
+  border: 1px solid
+    color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent);
+  background-color: var(--wst-primary-background-color, #fff);
+  border-radius: 4px;
+  gap: 14px;
+  min-width: 164px;
+  min-height: 74px;
+  padding: 0 20px;
+  position: relative;
+}
+
+.fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"]:not([data-disabled]):not([data-readonly])) {
+  cursor: pointer;
+}
+
+.fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"][data-checked]) {
+  z-index: 1;
+  border-color: var(--wst-links-and-actions-color, #116dff);
+  background-color: color-mix(in srgb,
+    var(--wst-links-and-actions-color, #116dff) 8%,
+    var(--wst-primary-background-color, #fff));
+}
+
+.fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"][data-invalid]) {
+  border-color: var(--wst-system-error-color, #df3131);
+  background-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 6%,
+    var(--wst-primary-background-color, #fff));
+}
+
+.fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"][data-disabled]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-disabled-color, #939393) 60%,
+    transparent);
+}
+
+.fieldItem-RyE1Xd[data-variant="box"] .fieldLabel-3Ws24V:before {
+  content: "";
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+}
+
+.fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"][data-disabled]) .fieldLabel-3Ws24V:before, .fieldItem-RyE1Xd[data-variant="box"]:has( > [role="radio"][data-readonly]) .fieldLabel-3Ws24V:before {
+  cursor: default;
+}
+
+.fieldLabelStack-TwpByX {
+  flex-direction: column;
+  gap: 4px;
+  display: inline-flex;
+}
+
+.fieldLabelText-cfnyvw {
+  align-items: center;
+  gap: 4px;
+  display: inline-flex;
+}
+
+.fieldSuffix-SKi6ny {
+  flex-shrink: 0;
+}
+

package/dist/RadioField/index.d.ts

@@ -0,0 +1,346 @@
+import { FieldControlProps } from '@base-ui/react/field';
+import { FieldDescriptionProps } from '../Field';
+import { FieldDescriptionProps as FieldDescriptionProps_2 } from '@base-ui/react/field';
+import { FieldErrorProps } from '../Field';
+import { FieldErrorProps as FieldErrorProps_2 } from '@base-ui/react/field';
+import { FieldItemProps } from '../Field';
+import { FieldItemProps as FieldItemProps_2 } from '@base-ui/react/field';
+import { FieldLabelProps } from '../Field';
+import { FieldLabelProps as FieldLabelProps_2 } from '@base-ui/react/field';
+import { FieldRootProps } from '../Field';
+import { FieldRootProps as FieldRootProps_3 } from '@base-ui/react/field';
+import { FieldValidityProps } from '@base-ui/react/field';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { LabelVariant } from '../Field/Field';
+import { RadioIndicatorProps as RadioIndicatorProps_2 } from '@base-ui/react/radio';
+import * as React_2 from 'react';
+
+/**
+ * Props shared by all Base UI components.
+ * Contains `className` (string or callback taking the component's state as an argument) and `render` (function to customize rendering).
+ */
+declare type BaseUIComponentProps<ElementType extends React_2.ElementType, State, RenderFunctionProps = HTMLProps> = Omit<WithBaseUIEvent<React_2.ComponentPropsWithRef<ElementType>>, 'className' | 'color' | 'defaultValue' | 'defaultChecked' | 'style'> & {
+    /**
+     * CSS class applied to the element, or a function that
+     * returns a class based on the component's state.
+     */
+    className?: string | ((state: State) => string | undefined) | undefined;
+    /**
+     * Allows you to replace the component's HTML element
+     * with a different tag, or compose it with another component.
+     *
+     * Accepts a `ReactElement` or a function that returns the element to render.
+     */
+    render?: React_2.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
+    /**
+     * Style applied to the element, or a function that
+     * returns a style object based on the component's state.
+     */
+    style?: React_2.CSSProperties | ((state: State) => React_2.CSSProperties | undefined) | undefined;
+};
+
+declare type BaseUIEvent<E extends React_2.SyntheticEvent<Element, Event>> = E & {
+    preventBaseUIHandler: () => void;
+    readonly baseUIHandlerPrevented?: boolean | undefined;
+};
+
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+declare type ComponentRenderFn<Props, State> = (props: Props, state: State) => React_2.ReactElement<unknown>;
+
+declare type ControlVariant = 'box' | 'line';
+
+declare const Field: {
+    Root: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldRootProps_3, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldLabelProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & {
+        /** `floating` lifts the label into the control until it is focused or filled. */
+        variant?: LabelVariant_2 | undefined;
+    } & React_2.RefAttributes<HTMLElement>>;
+    Error: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldErrorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Description: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldDescriptionProps_2, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>>;
+    Control: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant | undefined;
+    } & React_2.RefAttributes<HTMLElement>>;
+    Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Validity: React_2.FC<FieldValidityProps>;
+};
+
+declare type FieldDescriptionProps_3 = React_2.ComponentPropsWithoutRef<typeof Field.Description>;
+
+declare type FieldErrorProps_3 = React_2.ComponentPropsWithoutRef<typeof Field.Error>;
+
+declare type FieldItemProps_3 = React_2.ComponentPropsWithoutRef<typeof Field.Item>;
+
+declare type FieldLabelProps_3 = React_2.ComponentPropsWithoutRef<typeof Field.Label>;
+
+declare type FieldRootProps_2 = React_2.ComponentPropsWithoutRef<typeof Field.Root>;
+
+declare interface FieldRootState {
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field has been touched.
+     */
+    touched: boolean;
+    /**
+     * Whether the field value has changed from its initial value.
+     */
+    dirty: boolean;
+    /**
+     * Whether the field is valid.
+     */
+    valid: boolean | null;
+    /**
+     * Whether the field has a value.
+     */
+    filled: boolean;
+    /**
+     * Whether the field is focused.
+     */
+    focused: boolean;
+}
+
+declare type HTMLProps<T = any> = React_2.HTMLAttributes<T> & {
+    ref?: React_2.Ref<T> | undefined;
+};
+
+declare type IndicatorProps = WithStringClassName<React_2.ComponentPropsWithoutRef<typeof Radio_2.Indicator>>;
+
+declare type LabelVariant_2 = 'default' | 'floating';
+
+declare interface NonNativeButtonProps {
+    /**
+     * Whether the component renders a native `<button>` element when replacing it
+     * via the `render` prop.
+     * Set to `true` if the rendered element is a native button.
+     * @default false
+     */
+    nativeButton?: boolean | undefined;
+}
+
+export declare namespace Radio {
+    export {
+        RadioRoot as Root,
+        RadioIndicator as Indicator
+    }
+}
+
+declare const Radio_2: {
+    Root: typeof Root;
+    Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<RadioIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
+};
+
+export declare const RadioField: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<Omit<Omit<FieldRootProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+    className?: string | undefined;
+} & React_2.RefAttributes<HTMLDivElement>, "ref">, "children"> & {
+    /** The unique value this option contributes to its `RadioGroup`. */
+    value: string;
+    /** Visible label rendered beside the radio. */
+    label: React_2.ReactNode;
+    /** Visual style: a plain radio row or a selectable `box` tile. */
+    variant?: RadioFieldVariant | undefined;
+    /** Renders the option selected (for standalone, controlled usage). */
+    checked?: boolean | undefined;
+    /** Supporting text rendered below the label. */
+    description?: React_2.ReactNode;
+    /** Error message rendered below the option; also marks the field invalid. */
+    error?: React_2.ReactNode;
+    /** Called with `value` when the option is chosen via click. */
+    onSelect?: ((value: string) => void) | undefined;
+    /** Size of the radio control in pixels. */
+    size?: number | undefined;
+    /** Extra inline content rendered after the label. */
+    suffix?: React_2.ReactNode;
+    /** Props forwarded to the `Field.Item` wrapping the radio and label. */
+    itemProps?: Omit<Omit<Omit<Omit<Omit<FieldItemProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>, "ref">, "children"> | undefined;
+    /** Props forwarded to the `Field.Label`. */
+    labelProps?: Omit<Omit<Omit<Omit<Omit<FieldLabelProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & {
+        variant?: LabelVariant | undefined;
+    } & React_2.RefAttributes<HTMLElement>, "ref">, "children"> | undefined;
+    /** Props forwarded to the `Field.Description`. */
+    descriptionProps?: Omit<Omit<Omit<Omit<Omit<FieldDescriptionProps, "ref"> & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLParagraphElement>, "ref">, "children"> | undefined;
+    /** Props forwarded to the `Field.Error`. */
+    errorProps?: Omit<Omit<Omit<Omit<Omit<FieldErrorProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>, "ref">, "children"> | undefined;
+    /** Props forwarded to the underlying `Radio.Root`. */
+    radioProps?: RadioRootProps | undefined;
+    /** Props forwarded to the `Radio.Indicator`. */
+    indicatorProps?: IndicatorProps | undefined;
+} & React_2.RefAttributes<HTMLDivElement>>;
+
+export declare type RadioFieldProps = Omit<FieldRootProps_2, 'children'> & {
+    /** The unique value this option contributes to its `RadioGroup`. */
+    value: string;
+    /** Visible label rendered beside the radio. */
+    label: React_2.ReactNode;
+    /** Visual style: a plain radio row or a selectable `box` tile. */
+    variant?: RadioFieldVariant;
+    /** Renders the option selected (for standalone, controlled usage). */
+    checked?: boolean;
+    /** Supporting text rendered below the label. */
+    description?: React_2.ReactNode;
+    /** Error message rendered below the option; also marks the field invalid. */
+    error?: React_2.ReactNode;
+    /** Called with `value` when the option is chosen via click. */
+    onSelect?: (value: string) => void;
+    /** Size of the radio control in pixels. */
+    size?: number;
+    /** Extra inline content rendered after the label. */
+    suffix?: React_2.ReactNode;
+    /** Props forwarded to the `Field.Item` wrapping the radio and label. */
+    itemProps?: Omit<FieldItemProps_3, 'children'>;
+    /** Props forwarded to the `Field.Label`. */
+    labelProps?: Omit<FieldLabelProps_3, 'children'>;
+    /** Props forwarded to the `Field.Description`. */
+    descriptionProps?: Omit<FieldDescriptionProps_3, 'children'>;
+    /** Props forwarded to the `Field.Error`. */
+    errorProps?: Omit<FieldErrorProps_3, 'children'>;
+    /** Props forwarded to the underlying `Radio.Root`. */
+    radioProps?: RadioRootProps;
+    /** Props forwarded to the `Radio.Indicator`. */
+    indicatorProps?: IndicatorProps;
+};
+
+export declare type RadioFieldVariant = 'default' | 'box';
+
+/**
+ * Indicates whether the radio button is selected.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
+ */
+declare const RadioIndicator: React_2.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React_2.RefAttributes<HTMLSpanElement>>;
+
+declare namespace RadioIndicator {
+    type Props = RadioIndicatorProps;
+    type State = RadioIndicatorState;
+}
+
+declare interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioIndicatorState> {
+    /**
+     * Whether to keep the HTML element in the DOM when the radio button is inactive.
+     * @default false
+     */
+    keepMounted?: boolean | undefined;
+}
+
+declare interface RadioIndicatorState {
+    /**
+     * Whether the radio button is currently selected.
+     */
+    checked: boolean;
+    /**
+     * The transition status of the component.
+     */
+    transitionStatus: TransitionStatus;
+}
+
+/**
+ * Represents the radio button itself.
+ * Renders a `<span>` element and a hidden `<input>` beside.
+ *
+ * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
+ */
+declare const RadioRoot: {
+    <Value>(props: RadioRoot.Props<Value>): React_2.JSX.Element;
+};
+
+declare namespace RadioRoot {
+    type State = RadioRootState;
+    type Props<TValue = any> = RadioRootProps_2<TValue>;
+}
+
+declare type RadioRootProps = Omit<WithStringClassName<Radio.Root.Props<string>> & {
+    size?: number;
+}, 'children' | 'size' | 'value'>;
+
+declare interface RadioRootProps_2<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRootState>, 'value'> {
+    /**
+     * The unique identifying value of the radio in a group.
+     */
+    value: Value;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled?: boolean | undefined;
+    /**
+     * Whether the user must choose a value before submitting a form.
+     */
+    required?: boolean | undefined;
+    /**
+     * Whether the user should be unable to select the radio button.
+     */
+    readOnly?: boolean | undefined;
+    /**
+     * A ref to access the hidden input element.
+     */
+    inputRef?: React_2.Ref<HTMLInputElement> | undefined;
+}
+
+declare interface RadioRootState extends FieldRootState {
+    /**
+     * Whether the radio button is currently selected.
+     */
+    checked: boolean;
+    /**
+     * Whether the component should ignore user interaction.
+     */
+    disabled: boolean;
+    /**
+     * Whether the user should be unable to select the radio button.
+     */
+    readOnly: boolean;
+    /**
+     * Whether the user must choose a value before submitting a form.
+     */
+    required: boolean;
+}
+
+declare function Root<Value>({ className, size, style, ...props }: RootProps<Value>): JSX_2.Element;
+
+declare type RootProps<Value> = WithStringClassName<Radio.Root.Props<Value>> & {
+    size?: number;
+};
+
+declare type TransitionStatus = 'starting' | 'ending' | 'idle' | undefined;
+
+/**
+ * Adds a `preventBaseUIHandler` method to all event handlers.
+ */
+declare type WithBaseUIEvent<T> = { [K in keyof T]: WithPreventBaseUIHandler<T[K]> };
+
+declare type WithPreventBaseUIHandler<T> = T extends ((event: infer E) => any) ? E extends React_2.SyntheticEvent<Element, Event> ? (event: BaseUIEvent<E>) => ReturnType<T> : T : T extends undefined ? undefined : T;
+
+declare type WithStringClassName<P> = Omit<P, 'className'> & {
+    className?: string;
+};
+
+export { }