fix(IR-37-46): fixed class for labels into Radio buttons component (#…

…10975)

packages/ui/src/primitives/tailwind/Radio/index.tsx

@@ -6,8 +6,8 @@ Version 1.0. (the "License"); you may not use this file except in compliance
 with the License. You may obtain a copy of the License at
 https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
 The License is based on the Mozilla Public License Version 1.1, but Sections 14
-and 15 have been added to cover use of software over a computer network and 
-provide for limited attribution for the Original Developer. In addition, 
+and 15 have been added to cover use of software over a computer network and
+provide for limited attribution for the Original Developer. In addition,
 Exhibit A has been modified to be consistent with Exhibit B.
 
 Software distributed under the License is distributed on an "AS IS" basis,
@@ -19,7 +19,7 @@ The Original Code is Ethereal Engine.
 The Original Developer is the Initial Developer. The Initial Developer of the
 Original Code is the Ethereal Engine team.
 
-All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023
 Ethereal Engine. All Rights Reserved.
 */
 
@@ -32,6 +32,7 @@ export const RadioRoot = ({
   onChange,
   selected,
   className,
+  labelClassName,
   disabled,
   description
 }: {
@@ -40,6 +41,7 @@ export const RadioRoot = ({
   onChange: React.ChangeEventHandler<HTMLInputElement>
   selected: boolean
   className?: string
+  labelClassName?: string
   disabled?: boolean
   description?: string
 }) => {
@@ -49,7 +51,7 @@ export const RadioRoot = ({
       <label
         onClick={() => onChange({ target: { value } } as any)}
         htmlFor={label}
-        className="flex cursor-pointer items-center text-sm font-medium text-theme-primary"
+        className={twMerge('flex cursor-pointer items-center text-sm font-medium text-theme-primary', labelClassName)}
       >
         <input
           type="radio"
@@ -74,13 +76,15 @@ const Radio = <T extends OptionValueType>({
   options,
   onChange,
   className,
+  labelClassName,
   horizontal,
   disabled
 }: {
   value: T
   options: { label: string; value: T; description?: string }[]
   onChange: (value: T) => void
   className?: string
+  labelClassName?: string
   horizontal?: boolean
   disabled?: boolean
 }) => {
@@ -91,6 +95,7 @@ const Radio = <T extends OptionValueType>({
           key={label}
           selected={value === optionValue}
           label={label}
+          labelClassName={labelClassName}
           value={optionValue}
           onChange={(event) => onChange(event.target.value as T)}
           disabled={disabled}