feat(pricing-plan) - fix bug related to the radio card input (#722)

Author: gabrielseco

example/src/ContractorOnboarding.tsx

@@ -43,8 +43,10 @@ const PricingPlanCards = ({
           title={option.label}
           description={option.description}
           features={option.meta?.features as string[]}
-          value={field.value}
-          onSelect={() => field.onChange(option.value)}
+          value={option.value}
+          onSelect={(value: string) => {
+            field.onChange(value);
+          }}
           selected={field.value === option.value}
         />
       ))}

example/src/components/PricingPlanCard.tsx

@@ -6,19 +6,15 @@ import {
   CardContent,
   CardFooter,
 } from '@remoteoss/remote-flows/internals';
-import {
-  RadioGroup,
-  RadioGroupItem,
-  cn,
-} from '@remoteoss/remote-flows/internals';
+import { cn } from '@remoteoss/remote-flows/internals';
 import { Check } from 'lucide-react';
 
 interface PricingPlanCardProps {
   title: React.ReactNode;
   description: React.ReactNode;
   features: string[];
   selected?: boolean;
-  onSelect?: () => void;
+  onSelect?: (value: string) => void;
   value: string;
 }
 
@@ -36,7 +32,9 @@ export function PricingPlanCard({
         'px-4 py-4 border-dashed border-[#9AA6B2] cursor-pointer transition-all',
         selected && 'border-solid border-[#9AA6B2] ring-2 ring-[#9AA6B2]',
       )}
-      onClick={onSelect}
+      onClick={() => {
+        onSelect?.(value);
+      }}
     >
       <CardHeader className='pb-4'>
         <CardTitle className='text-xl font-bold'>{title}</CardTitle>
@@ -56,17 +54,38 @@ export function PricingPlanCard({
       </CardContent>
 
       <CardFooter className='pt-4'>
-        <RadioGroup value={selected ? value : undefined} className='w-full'>
-          <div className='flex items-center gap-2'>
-            <RadioGroupItem value={value} id={value} />
-            <label
-              htmlFor={value}
-              className='cursor-pointer text-sm font-medium'
-            >
-              Select plan
-            </label>
+        <div className='flex items-center gap-3 w-full'>
+          <div
+            style={{
+              width: '20px',
+              height: '20px',
+              borderRadius: '50%',
+              border: `2px solid ${selected ? '#9AA6B2' : '#D1D5DB'}`,
+              backgroundColor: selected ? '#9AA6B2' : '#FFFFFF',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+              transition: 'all 0.2s',
+            }}
+          >
+            {selected && (
+              <Check
+                className='text-white'
+                style={{ width: '12px', height: '12px' }}
+              />
+            )}
           </div>
-        </RadioGroup>
+          <span
+            style={{
+              fontSize: '14px',
+              fontWeight: 500,
+              color: selected ? '#364452' : '#6B7280',
+            }}
+          >
+            Select plan
+          </span>
+        </div>
       </CardFooter>
     </Card>
   );