From 4941b28ab67f4f31aac2711dfed5cc92c932bd6f Mon Sep 17 00:00:00 2001
From: chriswithf <109297552+chriswithf@users.noreply.github.com>
Date: Thu, 18 Jul 2024 15:05:44 +0200
Subject: [PATCH] add hover effect to radio buttons (#313)

---
 src/components/form/primitive/Radio/Radio.tsx |  2 +-
 src/components/form/primitive/useThemedCss.ts | 14 ++++++++++++--
 src/components/form/theme.ts                  |  2 ++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/form/primitive/Radio/Radio.tsx b/src/components/form/primitive/Radio/Radio.tsx
index 5f2bd765..9a259c5e 100644
--- a/src/components/form/primitive/Radio/Radio.tsx
+++ b/src/components/form/primitive/Radio/Radio.tsx
@@ -48,7 +48,7 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>(function Radio(
     size,
   })
   const radioLabelCss = useRadioLabelCss({ mode, size, disabled })
-  const radioInputCss = useRadioInputCss({ size })
+  const radioInputCss = useRadioInputCss({ size, disabled })
 
   return (
     <label className={classNames(radioCss, className)}>
diff --git a/src/components/form/primitive/useThemedCss.ts b/src/components/form/primitive/useThemedCss.ts
index 258c71ee..1055ecba 100644
--- a/src/components/form/primitive/useThemedCss.ts
+++ b/src/components/form/primitive/useThemedCss.ts
@@ -229,14 +229,24 @@ export function useRadioLabelCss({
   )
 }
 
-export function useRadioInputCss({ size }: { size: Size }) {
+export function useRadioInputCss({
+  size,
+  disabled,
+}: {
+  size: Size
+  disabled: boolean
+}) {
   const {
     form: {
       radio: { input: theme },
     },
   } = useTheme()
 
-  return classNames(theme.base, theme.size[size])
+  return classNames(
+    theme.base,
+    theme.size[size],
+    disabled ? theme.disabled : theme.normal,
+  )
 }
 
 export function useRadioIconCss({
diff --git a/src/components/form/theme.ts b/src/components/form/theme.ts
index 0471403d..baf1bf29 100644
--- a/src/components/form/theme.ts
+++ b/src/components/form/theme.ts
@@ -271,6 +271,8 @@ export default {
     },
     input: {
       base: 'peer absolute h-0 w-0 opacity-0',
+      normal: 'cursor-pointer',
+      disabled: '',
       size: {
         [Size.Sm]: 'h-4 w-4',
         [Size.Md]: 'h-5 w-5',