Update theme for radio button

src/form/Radio/Radio.story.tsx

@@ -1,5 +1,6 @@
 import React, { Fragment, useState } from 'react';
 import { Radio } from './Radio';
+import { Stack } from '@/layout';
 
 export default {
   title: 'Components/Form/Radio',
@@ -13,7 +14,12 @@ export const Simple = () => {
 
 export const Disabled = () => {
   const [state, setState] = useState(true);
-  return <Radio disabled checked={state} onChange={setState} />;
+  return (
+    <Stack>
+      <Radio disabled checked={false} label="Disabled" />
+      <Radio disabled checked={state} onChange={setState} label="Disabled" />
+    </Stack>
+  );
 };
 
 export const Sizes = () => {

src/form/Radio/Radio.tsx

@@ -8,8 +8,7 @@ import React, {
 } from 'react';
 import { motion } from 'framer-motion';
 import { RadioGroupContext } from './RadioGroupContext';
-import { twMerge } from 'tailwind-merge';
-import { useComponentTheme } from '@/utils';
+import { cn, useComponentTheme } from '@/utils';
 import { RadioTheme } from './RadioTheme';
 
 export interface RadioProps {
@@ -105,17 +104,15 @@ export const Radio: FC<RadioProps & RadioRef> = forwardRef(
     const theme: RadioTheme = useComponentTheme('radio', customTheme);
 
     return (
-      <div className={twMerge(theme.base, className)}>
+      <div className={cn(theme.base, className)}>
         <div
           {...rest}
           ref={ref}
           tabIndex={0}
-          className={twMerge(
-            theme.radio.base,
-            disabled && theme.radio.disabled,
-            checked && theme.radio.checked,
-            theme.sizes[size]
-          )}
+          className={cn(theme.radio.base, theme.sizes[size], {
+            [theme.radio.checked]: checked,
+            [theme.radio.disabled]: disabled
+          })}
           onClick={() => {
             if (!disabled) {
               onValueChange(!checked);
@@ -129,10 +126,9 @@ export const Radio: FC<RadioProps & RadioRef> = forwardRef(
           }}
         >
           <motion.div
-            className={twMerge(
-              theme.indicator.base,
-              theme.indicator.sizes[size]
-            )}
+            className={cn(theme.indicator.base, theme.indicator.sizes[size], {
+              [theme.indicator.disabled]: disabled
+            })}
             initial={!disabled ? { opacity: 0, scale: 0.5 } : {}}
             variants={VARIANTS}
             animate={checked ? 'check' : 'uncheck'}
@@ -141,10 +137,11 @@ export const Radio: FC<RadioProps & RadioRef> = forwardRef(
         </div>
         {label && (
           <span
-            className={twMerge(
-              theme.label.base,
-              !disabled && theme.label.clickable
-            )}
+            className={cn(theme.label.base, {
+              [theme.label.checked]: checked,
+              [theme.label.disabled]: disabled,
+              [theme.label.clickable]: !disabled
+            })}
             onClick={() => {
               if (!disabled) {
                 onValueChange(!checked);

src/form/Radio/RadioTheme.ts

@@ -7,6 +7,7 @@ export interface RadioTheme {
   };
   indicator: {
     base: string;
+    disabled: string;
     sizes: {
       small: string;
       medium: string;
@@ -16,6 +17,8 @@ export interface RadioTheme {
   label: {
     base: string;
     clickable: string;
+    checked: string;
+    disabled: string;
   };
   sizes: {
     small: string;
@@ -25,23 +28,26 @@ export interface RadioTheme {
 }
 
 const baseTheme: RadioTheme = {
-  base: 'box-border leading-none',
+  base: 'box-border leading-none group',
   radio: {
     base: 'will-change-[border-color] inline-flex justify-center items-center box-border align-middle rounded-[100%] bg-transparent border cursor-pointer',
-    disabled: 'cursor-not-allowed opacity-60',
+    disabled: 'cursor-not-allowed',
     checked: ''
   },
   indicator: {
     base: 'rounded-[100%]',
+    disabled: 'cursor-not-allowed',
     sizes: {
-      small: 'w-1.5 h-1.5',
-      medium: 'w-2 h-2',
-      large: 'w-2.5 h-2.5'
+      small: 'w-2 h-2',
+      medium: 'w-2.5 h-2.5',
+      large: 'w-3.5 h-3.5'
     }
   },
   label: {
     base: 'w-full align-middle ml-2.5',
-    clickable: 'cursor-pointer'
+    clickable: 'cursor-pointer hover:text-blue-300',
+    disabled: 'cursor-not-allowed',
+    checked: ''
   },
   sizes: {
     small: 'w-3 h-3',
@@ -54,16 +60,31 @@ export const radioTheme: RadioTheme = {
   ...baseTheme,
   label: {
     ...baseTheme.label,
-    base: [baseTheme.label.base, 'text-surface-content'].join(' ')
+    base: [baseTheme.label.base, 'text-panel-secondary-content'].join(' '),
+    checked: [baseTheme.label.checked, 'text-panel-content'].join(' '),
+    disabled: [baseTheme.label.disabled, '!text-secondary-inactive/40'].join(
+      ' '
+    )
   },
   radio: {
     ...baseTheme.radio,
-    base: [baseTheme.radio.base, 'border-surface'].join(' '),
-    checked: [baseTheme.radio.checked, 'border-primary'].join(' ')
+    base: [
+      baseTheme.radio.base,
+      'border-surface group-hover:border-primary-hover hover:border-primary-hover'
+    ].join(' '),
+    checked: [
+      baseTheme.radio.checked,
+      'border-primary-active group-hover:border-primary-hover'
+    ].join(' '),
+    disabled: [baseTheme.radio.disabled, '!border-secondary-inactive'].join(' ')
   },
   indicator: {
     ...baseTheme.indicator,
-    base: [baseTheme.indicator.base, 'bg-primary'].join(' ')
+    base: [
+      baseTheme.indicator.base,
+      'bg-primary group-hover:bg-primary-hover'
+    ].join(' '),
+    disabled: [baseTheme.indicator.disabled, '!bg-secondary-inactive'].join(' ')
   }
 };