web/packages/design-system/lib/components/Radio/Radio.tsx

import { PropsWithChildren } from 'react'
import { Radio as AriaRadio } from 'react-aria-components'
import styles from './radio.module.css'
import { variants } from './variants'
import { cx } from 'class-variance-authority'

interface RadioProps extends PropsWithChildren {
  value: string
  id?: string
  isDisabled?: boolean
  color?: 'Burgundy'
  wrapping?: boolean
}

export function Radio({
  id,
  value,
  children,
  color,
  isDisabled,
  wrapping = true,
}: RadioProps) {
  const inputId = id || `radio-${value}`

  const classNames = variants({
    color,
  })

  return (
    <AriaRadio
      id={inputId}
      value={value}
      isDisabled={isDisabled}
      className={cx(styles.container, {
        [styles.disabled]: isDisabled,
        [styles.wrapping]: wrapping,
      })}
    >
      <div className={`${styles.radio} ${classNames}`} />
      {children && <div>{children}</div>}
    </AriaRadio>
  )
}