import { useState } from 'react';
import Radio from '../radio/Radio.mjs';
import { useInputAttributes } from '../inputs/contexts.mjs';
import { jsx } from 'react/jsx-runtime';

function RadioGroup({
  name,
  radios,
  selectedValue: controlledValue,
  onChange,
  UNSAFE_inputAttributes
}) {
  const inputAttributes = useInputAttributes({
    nonLabelable: true
  });
  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
  return radios.length > 0 ? /*#__PURE__*/jsx("div", {
    role: "radiogroup",
    ...inputAttributes,
    ...UNSAFE_inputAttributes,
    children: radios.map(({
      value = '',
      ...restProps
    }, index) => /*#__PURE__*/jsx(Radio
    // eslint-disable-next-line react/no-array-index-key
    , {
      ...restProps,
      name: name,
      value: value,
      checked: value === uncontrolledValue,
      onChange: nextValue => {
        setUncontrolledValue(nextValue);
        onChange(nextValue);
      }
    }, index))
  }) : null;
}

export { RadioGroup as default };
//# sourceMappingURL=RadioGroup.mjs.map
