add hover effect to radio buttons (#313)

aboutbits · Jul 18, 2024 · 4941b28 · 4941b28
1 parent f29759e
commit 4941b28
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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',