@base-ui/react 1.5.0 → 1.6.0

package/progress/track/ProgressTrack.mjs

@@ -0,0 +1,31 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useProgressRootContext } from "../root/ProgressRootContext.mjs";
+import { progressStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
+/**
+ * Contains the progress bar indicator.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export const ProgressTrack = /*#__PURE__*/React.forwardRef(function ProgressTrack(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useProgressRootContext();
+  const element = useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: elementProps,
+    stateAttributesMapping: progressStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ProgressTrack.displayName = "ProgressTrack";

package/progress/value/ProgressValue.d.mts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../internals/types.mjs";
+import type { ProgressRootState } from "../root/ProgressRoot.mjs";
+/**
+ * A text label displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export declare const ProgressValue: React.ForwardRefExoticComponent<Omit<ProgressValueProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface ProgressValueState extends ProgressRootState {}
+export interface ProgressValueProps extends Omit<BaseUIComponentProps<'span', ProgressValueState>, 'children'> {
+  children?: null | ((formattedValue: string | null, value: number | null) => React.ReactNode) | undefined;
+}
+export declare namespace ProgressValue {
+  type State = ProgressValueState;
+  type Props = ProgressValueProps;
+}

package/progress/value/ProgressValue.mjs

@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useProgressRootContext } from "../root/ProgressRootContext.mjs";
+import { progressStateAttributesMapping } from "../root/stateAttributesMapping.mjs";
+/**
+ * A text label displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Progress](https://base-ui.com/react/components/progress)
+ */
+export const ProgressValue = /*#__PURE__*/React.forwardRef(function ProgressValue(componentProps, forwardedRef) {
+  const {
+    className,
+    render,
+    children,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    value,
+    formattedValue,
+    state
+  } = useProgressRootContext();
+  const formattedValueArg = value == null ? 'indeterminate' : formattedValue;
+  const formattedValueDisplay = value == null ? null : formattedValue;
+  const element = useRenderElement('span', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [{
+      'aria-hidden': true,
+      children: typeof children === 'function' ? children(formattedValueArg, value) : formattedValueDisplay
+    }, elementProps],
+    stateAttributesMapping: progressStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") ProgressValue.displayName = "ProgressValue";

package/radio/index.d.mts

@@ -0,0 +1,3 @@
+export * as Radio from "./index.parts.mjs";
+export type * from "./root/RadioRoot.mjs";
+export type * from "./indicator/RadioIndicator.mjs";

package/radio/index.mjs

@@ -0,0 +1 @@
+export * as Radio from "./index.parts.mjs";

package/radio/index.parts.d.mts

@@ -0,0 +1,2 @@
+export { RadioRoot as Root } from "./root/RadioRoot.mjs";
+export { RadioIndicator as Indicator } from "./indicator/RadioIndicator.mjs";

package/radio/index.parts.mjs

@@ -0,0 +1,2 @@
+export { RadioRoot as Root } from "./root/RadioRoot.mjs";
+export { RadioIndicator as Indicator } from "./indicator/RadioIndicator.mjs";

package/radio/indicator/RadioIndicator.d.mts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../internals/types.mjs";
+import type { RadioRootState } from "../root/RadioRoot.mjs";
+import { type TransitionStatus } from "../../internals/useTransitionStatus.mjs";
+/**
+ * Indicates whether the radio button is selected.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
+ */
+export declare const RadioIndicator: React.ForwardRefExoticComponent<Omit<RadioIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export 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;
+}
+export interface RadioIndicatorState extends RadioRootState {
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus;
+}
+export declare namespace RadioIndicator {
+  type Props = RadioIndicatorProps;
+  type State = RadioIndicatorState;
+}

package/radio/indicator/RadioIndicator.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { RadioRootState } from "../root/RadioRoot.js";
 import { type TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * Indicates whether the radio button is selected.
@@ -15,11 +16,7 @@ export interface RadioIndicatorProps extends BaseUIComponentProps<'span', RadioI
    */
   keepMounted?: boolean | undefined;
 }
-export interface RadioIndicatorState {
-  /**
-   * Whether the radio button is currently selected.
-   */
-  checked: boolean;
+export interface RadioIndicatorState extends RadioRootState {
   /**
    * The transition status of the component.
    */

package/radio/indicator/RadioIndicator.mjs

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useRadioRootContext } from "../root/RadioRootContext.mjs";
+import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.mjs";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.mjs";
+
+/**
+ * Indicates whether the radio button is selected.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Radio](https://base-ui.com/react/components/radio)
+ */
+export const RadioIndicator = /*#__PURE__*/React.forwardRef(function RadioIndicator(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 = React.useRef(null);
+  const shouldRender = keepMounted || mounted;
+  const element = useRenderElement('span', componentProps, {
+    ref: [forwardedRef, indicatorRef],
+    state,
+    props: elementProps,
+    stateAttributesMapping
+  });
+  useOpenChangeComplete({
+    open: rendered,
+    ref: indicatorRef,
+    onComplete() {
+      if (!rendered) {
+        setMounted(false);
+      }
+    }
+  });
+  if (!shouldRender) {
+    return null;
+  }
+  return element;
+});
+if (process.env.NODE_ENV !== "production") RadioIndicator.displayName = "RadioIndicator";

package/radio/indicator/RadioIndicatorDataAttributes.mjs

@@ -0,0 +1,56 @@
+import { TransitionStatusDataAttributes } from "../../internals/stateAttributesMapping.mjs";
+export let RadioIndicatorDataAttributes = function (RadioIndicatorDataAttributes) {
+  /**
+   * Present when the radio is checked.
+   */
+  RadioIndicatorDataAttributes["checked"] = "data-checked";
+  /**
+   * Present when the radio is not checked.
+   */
+  RadioIndicatorDataAttributes["unchecked"] = "data-unchecked";
+  /**
+   * Present when the radio is disabled.
+   */
+  RadioIndicatorDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the radio is readonly.
+   */
+  RadioIndicatorDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Present when the radio is required.
+   */
+  RadioIndicatorDataAttributes["required"] = "data-required";
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  RadioIndicatorDataAttributes[RadioIndicatorDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
+  /**
+   * Present when the radio is in a valid state (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the radio is in an invalid state (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the radio has been touched (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the radio's value has changed (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the radio is checked (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the radio is focused (when wrapped in Field.Root).
+   */
+  RadioIndicatorDataAttributes["focused"] = "data-focused";
+  return RadioIndicatorDataAttributes;
+}({});

package/radio/root/RadioRoot.d.mts

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import type { BaseUIComponentProps, NonNativeButtonProps } from "../../internals/types.mjs";
+import type { FieldRootState } from "../../field/root/FieldRoot.mjs";
+/**
+ * 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)
+ */
+export declare const RadioRoot: {
+  <Value>(props: RadioRoot.Props<Value>): React.JSX.Element;
+};
+export 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;
+  /**
+   * Whether the radio button has been touched (when wrapped in Field.Root).
+   */
+  touched: boolean;
+  /**
+   * Whether the radio button's value has changed from its initial value (when wrapped in Field.Root).
+   */
+  dirty: boolean;
+  /**
+   * Whether the radio button is in a valid state (when wrapped in Field.Root).
+   */
+  valid: boolean | null;
+  /**
+   * Whether the radio button has a value (when wrapped in Field.Root).
+   */
+  filled: boolean;
+  /**
+   * Whether the radio button is focused (when wrapped in Field.Root).
+   */
+  focused: boolean;
+}
+export interface RadioRootProps<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.Ref<HTMLInputElement> | undefined;
+}
+export declare namespace RadioRoot {
+  type State = RadioRootState;
+  type Props<TValue = any> = RadioRootProps<TValue>;
+}

package/radio/root/RadioRoot.d.ts

@@ -27,6 +27,26 @@ export interface RadioRootState extends FieldRootState {
    * Whether the user must choose a value before submitting a form.
    */
   required: boolean;
+  /**
+   * Whether the radio button has been touched (when wrapped in Field.Root).
+   */
+  touched: boolean;
+  /**
+   * Whether the radio button's value has changed from its initial value (when wrapped in Field.Root).
+   */
+  dirty: boolean;
+  /**
+   * Whether the radio button is in a valid state (when wrapped in Field.Root).
+   */
+  valid: boolean | null;
+  /**
+   * Whether the radio button has a value (when wrapped in Field.Root).
+   */
+  filled: boolean;
+  /**
+   * Whether the radio button is focused (when wrapped in Field.Root).
+   */
+  focused: boolean;
 }
 export interface RadioRootProps<Value = any> extends NonNativeButtonProps, Omit<BaseUIComponentProps<'span', RadioRootState>, 'value'> {
   /**

package/radio/root/RadioRoot.js

@@ -68,8 +68,6 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const registerControlRef = groupContext?.registerControlRef ?? _noop.NOOP;
   const registerInputRef = groupContext?.registerInputRef ?? _noop.NOOP;
   const {
-    setDirty,
-    validityData,
     setTouched: setFieldTouched,
     setFilled,
     state: fieldState,
@@ -163,7 +161,8 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
     buttonRef
   } = (0, _useButton.useButton)({
     disabled,
-    native: nativeButton
+    native: nativeButton,
+    composite: false
   });
   const inputProps = {
     type: 'radio',
@@ -190,13 +189,11 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
         return;
       }
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.none, event.nativeEvent);
+      setCheckedValue(value, details);
       if (details.isCanceled) {
         return;
       }
       setFieldTouched(true);
-      setDirty(value !== validityData.initialValue);
-      setFilled(true);
-      setCheckedValue(value, details);
     },
     onFocus() {
       radioRef.current?.focus();
@@ -212,7 +209,7 @@ const RadioRoot = exports.RadioRoot = /*#__PURE__*/React.forwardRef(function Rad
   const contextValue = state;
   const isRadioGroup = groupContext !== undefined;
   const refs = [forwardedRef, radioRef, buttonRef, handleControlRef];
-  const props = [rootProps, getDescriptionProps, validation?.getValidationProps ?? _empty.EMPTY_OBJECT, elementProps, getButtonProps];
+  const props = [rootProps, elementProps, getButtonProps, getDescriptionProps, validation ? validationProps => validation.getValidationProps(disabled, validationProps) : _empty.EMPTY_OBJECT];
   const element = (0, _useRenderElement.useRenderElement)('span', componentProps, {
     enabled: !isRadioGroup,
     state,

package/radio/root/RadioRoot.mjs

@@ -0,0 +1,232 @@
+'use client';
+
+import * as React from 'react';
+import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { ownerWindow } from '@base-ui/utils/owner';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+import { NOOP } from "../../internals/noop.mjs";
+import { stateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
+import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useButton } from "../../internals/use-button/index.mjs";
+import { ACTIVE_COMPOSITE_ITEM } from "../../internals/composite/constants.mjs";
+import { CompositeItem } from "../../internals/composite/item/CompositeItem.mjs";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.mjs";
+import { useFieldItemContext } from "../../field/item/FieldItemContext.mjs";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.mjs";
+import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.mjs";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.mjs";
+import { useRadioGroupContext } from "../../radio-group/RadioGroupContext.mjs";
+import { serializeValue } from "../../internals/serializeValue.mjs";
+import { RadioRootContext } from "./RadioRootContext.mjs";
+
+/**
+ * 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)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const RadioRoot = /*#__PURE__*/React.forwardRef(function RadioRoot(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();
+  const {
+    disabled: disabledGroup,
+    readOnly: readOnlyGroup,
+    required: requiredGroup,
+    form: formGroup,
+    checkedValue,
+    touched = false,
+    validation,
+    name
+  } = groupContext ?? {};
+  const setCheckedValue = groupContext?.setCheckedValue ?? NOOP;
+  const setTouched = groupContext?.setTouched ?? NOOP;
+  const registerControlRef = groupContext?.registerControlRef ?? NOOP;
+  const registerInputRef = groupContext?.registerInputRef ?? NOOP;
+  const {
+    setTouched: setFieldTouched,
+    setFilled,
+    state: fieldState,
+    disabled: fieldDisabled
+  } = useFieldRootContext();
+  const fieldItemContext = useFieldItemContext();
+  const {
+    labelId,
+    getDescriptionProps
+  } = useLabelableContext();
+  const disabled = fieldDisabled || fieldItemContext.disabled || disabledGroup || disabledProp;
+  const readOnly = readOnlyGroup || readOnlyProp;
+  const required = requiredGroup || requiredProp;
+  const form = formGroup;
+  const checked = groupContext ? checkedValue === value : value === '';
+  const radioRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const handleControlRef = useStableCallback(element => {
+    if (!element) {
+      return;
+    }
+    registerControlRef(element, disabled);
+  });
+  const mergedInputRef = useMergedRefs(inputRefProp, inputRef, registerInputRef);
+  useIsoLayoutEffect(() => {
+    if (inputRef.current?.checked) {
+      setFilled(true);
+    }
+  }, [setFilled]);
+  useIsoLayoutEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    if (disabled && checked) {
+      registerInputRef(null);
+      return;
+    }
+    if (radioRef.current) {
+      registerControlRef(radioRef.current, disabled);
+    }
+    registerInputRef(inputRef.current);
+  }, [checked, disabled, registerControlRef, registerInputRef]);
+  const id = useBaseUiId();
+  const inputId = useLabelableId({
+    id: idProp,
+    implicit: false,
+    controlRef: radioRef
+  });
+  const hiddenInputId = nativeButton ? undefined : inputId;
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, hiddenInputId);
+  const rootProps = {
+    role: 'radio',
+    'aria-checked': checked,
+    'aria-required': required || undefined,
+    'aria-readonly': readOnly || undefined,
+    'aria-labelledby': ariaLabelledBy,
+    [ACTIVE_COMPOSITE_ITEM]: checked ? '' : undefined,
+    id: nativeButton ? inputId : id,
+    onKeyDown(event) {
+      if (event.key === 'Enter') {
+        event.preventDefault();
+      }
+    },
+    onClick(event) {
+      if (event.defaultPrevented || disabled || readOnly) {
+        return;
+      }
+      event.preventDefault();
+      const input = inputRef.current;
+      if (!input) {
+        return;
+      }
+      input.dispatchEvent(new (ownerWindow(input).PointerEvent)('click', {
+        bubbles: true,
+        shiftKey: event.shiftKey,
+        ctrlKey: event.ctrlKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey
+      }));
+    },
+    onFocus(event) {
+      if (event.defaultPrevented || disabled || readOnly || !touched) {
+        return;
+      }
+      inputRef.current?.click();
+      setTouched(false);
+    }
+  };
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton,
+    composite: false
+  });
+  const inputProps = {
+    type: 'radio',
+    ref: mergedInputRef,
+    form,
+    id: hiddenInputId,
+    name,
+    tabIndex: -1,
+    style: name ? visuallyHiddenInput : visuallyHidden,
+    'aria-hidden': true,
+    ...(value !== undefined ? {
+      value: serializeValue(value)
+    } : EMPTY_OBJECT),
+    disabled,
+    checked,
+    required,
+    readOnly,
+    onChange(event) {
+      // Workaround for https://github.com/facebook/react/issues/9023
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      if (disabled || readOnly || value === undefined) {
+        return;
+      }
+      const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
+      setCheckedValue(value, details);
+      if (details.isCanceled) {
+        return;
+      }
+      setFieldTouched(true);
+    },
+    onFocus() {
+      radioRef.current?.focus();
+    }
+  };
+  const state = React.useMemo(() => ({
+    ...fieldState,
+    required,
+    disabled,
+    readOnly,
+    checked
+  }), [fieldState, disabled, readOnly, checked, required]);
+  const contextValue = state;
+  const isRadioGroup = groupContext !== undefined;
+  const refs = [forwardedRef, radioRef, buttonRef, handleControlRef];
+  const props = [rootProps, elementProps, getButtonProps, getDescriptionProps, validation ? validationProps => validation.getValidationProps(disabled, validationProps) : EMPTY_OBJECT];
+  const element = useRenderElement('span', componentProps, {
+    enabled: !isRadioGroup,
+    state,
+    ref: refs,
+    props,
+    stateAttributesMapping
+  });
+  return /*#__PURE__*/_jsxs(RadioRootContext.Provider, {
+    value: contextValue,
+    children: [isRadioGroup ? /*#__PURE__*/_jsx(CompositeItem, {
+      tag: "span",
+      render: render,
+      className: className,
+      style: style,
+      state: state,
+      refs: refs,
+      props: props,
+      stateAttributesMapping: stateAttributesMapping
+    }) : element, /*#__PURE__*/_jsx("input", {
+      ...inputProps,
+      suppressHydrationWarning: true
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") RadioRoot.displayName = "RadioRoot";

package/radio/root/RadioRootContext.d.mts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { RadioRootState } from "./RadioRoot.mjs";
+export type RadioRootContext = RadioRootState;
+export declare const RadioRootContext: React.Context<RadioRootState | undefined>;
+export declare function useRadioRootContext(): RadioRootState;

package/radio/root/RadioRootContext.d.ts

@@ -1,9 +1,5 @@
 import * as React from 'react';
-export interface RadioRootContext {
-  disabled: boolean;
-  readOnly: boolean;
-  checked: boolean;
-  required: boolean;
-}
-export declare const RadioRootContext: React.Context<RadioRootContext | undefined>;
-export declare function useRadioRootContext(): RadioRootContext;
+import type { RadioRootState } from "./RadioRoot.js";
+export type RadioRootContext = RadioRootState;
+export declare const RadioRootContext: React.Context<RadioRootState | undefined>;
+export declare function useRadioRootContext(): RadioRootState;

package/radio/utils/stateAttributesMapping.d.mts

@@ -0,0 +1,6 @@
+import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
+export declare const stateAttributesMapping: {
+  transitionStatus(value: TransitionStatus): Record<string, string> | null;
+  valid(value: boolean | null): Record<string, string> | null;
+  checked(value: boolean): Record<string, string>;
+};