@equinor/eds-core-react/dist/esm/components/Radio/Radio.js

The React implementation of the Equinor Design System

import { forwardRef, useMemo } from 'react';
import styled, { ThemeProvider } from 'styled-components';
import { radio_button_selected, radio_button_unselected } from '@equinor/eds-icons';
import { comfortable } from './Radio.tokens.js';
import { useToken, spacingsTemplate, outlineTemplate, typographyTemplate } from '@equinor/eds-utils';
import { jsxs, jsx } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';

/* eslint camelcase: "off" */
const Input = styled.input.attrs(({
  type = 'radio'
}) => ({
  type
})).withConfig({
  displayName: "Radio__Input",
  componentId: "sc-we59oz-0"
})(["--scale:", ";appearance:none;width:100%;height:100%;margin:0;grid-area:input;transform:scale(var(--scale));cursor:", ";&:focus{outline:none;}&[data-focus-visible-added]:focus + svg{", "}&:focus-visible + svg{", "}&:not(:checked) ~ svg path[name='selected']{display:none;}&:not(:checked) ~ svg path[name='unselected']{display:inline;}&:checked ~ svg path[name='unselected']{display:none;}&:checked ~ svg path[name='selected']{display:inline;}"], ({
  theme,
  $iconSize
}) => parseFloat(theme.clickbound.height) / $iconSize, ({
  disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
  theme
}) => outlineTemplate(theme.states.focus.outline), ({
  theme
}) => outlineTemplate(theme.states.focus.outline));
const StyledLabel = styled.label.withConfig({
  displayName: "Radio__StyledLabel",
  componentId: "sc-we59oz-1"
})(["display:inline-flex;align-items:center;cursor:", ";"], ({
  $disabled
}) => $disabled ? 'not-allowed' : 'pointer');
const StyledPath = styled.path.attrs(({
  $icon
}) => ({
  fillRule: 'evenodd',
  clipRule: 'evenodd',
  d: $icon.svgPathData
})).withConfig({
  displayName: "Radio__StyledPath",
  componentId: "sc-we59oz-2"
})([""]);
const Svg = styled.svg.attrs(({
  height,
  width,
  fill
}) => ({
  name: null,
  xmlns: 'http://www.w3.org/2000/svg',
  height,
  width,
  fill
})).withConfig({
  displayName: "Radio__Svg",
  componentId: "sc-we59oz-3"
})(["grid-area:input;pointer-events:none;"]);
const LabelText = styled.span.withConfig({
  displayName: "Radio__LabelText",
  componentId: "sc-we59oz-4"
})(["", ""], typographyTemplate(comfortable.typography));
const InputWrapper = styled.span.withConfig({
  displayName: "Radio__InputWrapper",
  componentId: "sc-we59oz-5"
})(["", " display:inline-grid;grid:[input] 1fr / [input] 1fr;position:relative;isolation:isolate;cursor:", ";&::before{content:'';position:absolute;width:", ";aspect-ratio:1/1;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:100%;}@media (hover:hover) and (pointer:fine){> svg{z-index:1;}&:hover{&::before{background-color:", ";}}}"], ({
  theme
}) => spacingsTemplate(theme.spacings), ({
  disabled
}) => disabled ? 'not-allowed' : 'pointer', ({
  theme
}) => theme.width, ({
  disabled
}) => disabled ? 'transparent' : comfortable.states.hover.background);
const Radio = /*#__PURE__*/forwardRef(function Radio({
  label,
  disabled = false,
  className,
  style,
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, comfortable);
  const iconSize = 24;
  const fill = disabled ? comfortable.states.disabled.background : comfortable.background;
  const renderSVG = useMemo(() => {
    return /*#__PURE__*/jsxs(Svg, {
      width: iconSize,
      height: iconSize,
      viewBox: `0 0 ${iconSize} ${iconSize}`,
      fill: fill,
      "aria-hidden": true,
      children: [/*#__PURE__*/jsx(StyledPath, {
        $icon: radio_button_selected,
        name: "selected"
      }), /*#__PURE__*/jsx(StyledPath, {
        $icon: radio_button_unselected,
        name: "unselected"
      })]
    });
  }, [fill]);
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: label ? /*#__PURE__*/jsxs(StyledLabel, {
      $disabled: disabled,
      className: className,
      style: style,
      children: [/*#__PURE__*/jsxs(InputWrapper, {
        disabled: disabled,
        children: [/*#__PURE__*/jsx(Input, {
          ...rest,
          ref: ref,
          disabled: disabled,
          $iconSize: iconSize
        }), renderSVG]
      }), /*#__PURE__*/jsx(LabelText, {
        children: label
      })]
    }) : /*#__PURE__*/jsxs(InputWrapper, {
      disabled: disabled,
      className: className,
      style: style,
      children: [/*#__PURE__*/jsx(Input, {
        ...rest,
        ref: ref,
        disabled: disabled,
        $iconSize: iconSize
      }), renderSVG]
    })
  });
});
Radio.displayName = 'Radio';

export { Radio };