chore: transfer repo

components/ui/RadioButton.tsx

@@ -0,0 +1,86 @@
+'use client';
+
+import React, { forwardRef, useState } from 'react';
+
+export interface RadioButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  className?: string;
+}
+
+export const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(
+  ({ label, className = '', onChange, ...props }, ref) => {
+    // Keep track of focus state for styling
+    const [isFocused, setIsFocused] = useState(false);
+    
+    // Handle click on the custom radio button
+    const handleClick = () => {
+      if (props.disabled) return;
+      
+      // Only trigger onChange if the radio button is not already checked
+      if (!props.checked) {
+        // Create a synthetic event to pass to the onChange handler
+        const syntheticEvent = {
+          target: {
+            name: props.name,
+            checked: true,
+            type: 'radio',
+            value: props.value
+          }
+        } as React.ChangeEvent<HTMLInputElement>;
+        
+        // Call the onChange handler with the synthetic event
+        if (onChange) {
+          onChange(syntheticEvent);
+        }
+      }
+    };
+    
+    return (
+      <div className={`flex items-center ${className}`}>
+        <div 
+          className="relative flex items-center cursor-pointer"
+          onClick={handleClick}
+        >
+          <input
+            type="radio"
+            ref={ref}
+            className="sr-only"
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            onChange={onChange}
+            {...props}
+          />
+          
+          <div 
+            className={`
+              h-5 w-5 rounded-full flex items-center justify-center
+              ${props.checked 
+                ? 'border-primary' 
+                : 'border-gray-300'
+              }
+              ${isFocused ? 'ring-2 ring-primary/30' : ''}
+              ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+              border-2 bg-white transition-colors
+            `}
+          >
+            {props.checked && (
+              <div className="w-3 h-3 rounded-full bg-primary"></div>
+            )}
+          </div>
+        </div>
+        
+        {label && (
+          <label 
+            htmlFor={props.id} 
+            className={`ml-2 text-sm ${props.disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+            onClick={!props.disabled ? handleClick : undefined}
+          >
+            {label}
+          </label>
+        )}
+      </div>
+    );
+  }
+);
+
+RadioButton.displayName = 'RadioButton';