@primer/react/lib-esm/Radio/Radio.js

An implementation of GitHub's Primer Design System using React

import React, { useContext } from 'react';
import { RadioGroupContext } from '../RadioGroup/RadioGroup.js';
import { clsx } from 'clsx';
import classes from './Radio.module.css.js';
import sharedClasses from '../Checkbox/shared.module.css.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';
import Box from '../Box/Box.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
/**
 * An accessible, native radio component for selecting one option from a list.
 */
const Radio = /*#__PURE__*/React.forwardRef(({
  checked,
  disabled,
  name: nameProp,
  onChange,
  sx: sxProp = defaultSxProp,
  required,
  validationStatus,
  value,
  className,
  ...rest
}, ref) => {
  const radioGroupContext = useContext(RadioGroupContext);
  const handleOnChange = e => {
    (radioGroupContext === null || radioGroupContext === undefined ? undefined : radioGroupContext.onChange) && radioGroupContext.onChange(e);
    onChange && onChange(e);
  };
  const name = nameProp || (radioGroupContext === null || radioGroupContext === undefined ? undefined : radioGroupContext.name);
  if (!name) {
    // eslint-disable-next-line no-console
    console.warn('A radio input must have a `name` attribute. Pass `name` as a prop directly to each Radio, or nest them in a `RadioGroup` component with a `name` prop');
  }
  if (sxProp !== defaultSxProp) {
    return (
      /*#__PURE__*/
      // eslint-disable-next-line github/a11y-role-supports-aria-props
      React.createElement(Box, _extends({
        as: "input",
        sx: sxProp,
        type: "radio",
        value: value,
        name: name,
        ref: ref,
        disabled: disabled,
        checked: checked,
        "aria-checked": checked ? 'true' : 'false',
        required: required,
        "aria-required": required ? 'true' : 'false',
        "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
        onChange: handleOnChange,
        className: clsx(className, sharedClasses.Input, classes.Radio)
      }, rest))
    );
  }
  return (
    /*#__PURE__*/
    // eslint-disable-next-line github/a11y-role-supports-aria-props
    React.createElement("input", _extends({
      type: "radio",
      value: value,
      name: name,
      ref: ref,
      disabled: disabled,
      checked: checked,
      "aria-checked": checked ? 'true' : 'false',
      required: required,
      "aria-required": required ? 'true' : 'false',
      "aria-invalid": validationStatus === 'error' ? 'true' : 'false',
      onChange: handleOnChange,
      className: clsx(className, sharedClasses.Input, classes.Radio)
    }, rest))
  );
});
Radio.displayName = 'Radio';

export { Radio as default };