Fix prop spread order in field widgets

Move {...props} before explicit props to allow proper overriding

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

packages/fields/src/widgets/BooleanField.tsx

@@ -17,12 +17,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
      return (
         <div className="flex items-center space-x-2">
             <Checkbox 
+                {...props}
                 id={id}
                 checked={!!value}
                 onCheckedChange={(checked) => onChange(!!checked)}
                 disabled={readonly}
-                className={props.className}
-                {...props}
             />
             <Label htmlFor={id}>{label}</Label>
         </div>
@@ -32,12 +31,11 @@ export function BooleanField({ value, onChange, field, readonly, ...props }: Fie
   return (
     <div className="flex items-center space-x-2">
         <Switch 
+            {...props}
             id={id} 
             checked={!!value} 
             onCheckedChange={onChange}
             disabled={readonly}
-            className={props.className}
-            {...props}
         />
         <Label htmlFor={id}>{label}</Label>
     </div>

packages/fields/src/widgets/CurrencyField.tsx

@@ -44,6 +44,7 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         {currency === 'USD' ? '$' : currency}
       </span>
       <Input
+        {...props}
         type="number"
         value={value ?? ''}
         onChange={(e) => {
@@ -56,7 +57,6 @@ export function CurrencyField({ value, onChange, field, readonly, errorMessage,
         className={`pl-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
-        {...props}
       />
     </div>
   );

packages/fields/src/widgets/DateField.tsx

@@ -9,12 +9,11 @@ export function DateField({ value, onChange, field, readonly, ...props }: FieldW
 
   return (
     <Input
+      {...props}
       type="date"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       disabled={readonly}
-      className={props.className}
-      {...props}
     />
   );
 }

packages/fields/src/widgets/DateTimeField.tsx

@@ -15,12 +15,11 @@ export function DateTimeField({ value, onChange, field, readonly, ...props }: Fi
 
   return (
     <Input
+      {...props}
       type="datetime-local"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       disabled={readonly}
-      className={props.className}
-      {...props}
     />
   );
 }

packages/fields/src/widgets/EmailField.tsx

@@ -18,13 +18,13 @@ export function EmailField({ value, onChange, field, readonly, errorMessage, ...
 
   return (
     <Input
+      {...props}
       type="email"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || 'email@example.com'}
       disabled={readonly}
       aria-invalid={!!errorMessage}
-      {...props}
     />
   );
 }

packages/fields/src/widgets/NumberField.tsx

@@ -13,6 +13,7 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
 
   return (
     <Input
+      {...props}
       type="number"
       value={value ?? ''}
       onChange={(e) => {
@@ -22,8 +23,6 @@ export function NumberField({ value, onChange, field, readonly, ...props }: Fiel
       placeholder={numberField?.placeholder}
       disabled={readonly}
       step={precision ? Math.pow(10, -precision) : 'any'}
-      className={props.className}
-      {...props}
     />
   );
 }

packages/fields/src/widgets/PasswordField.tsx

@@ -15,13 +15,13 @@ export function PasswordField({ value, onChange, field, readonly, className, ...
   return (
     <div className="relative">
       <Input
+        {...props}
         type={showPassword ? 'text' : 'password'}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
         placeholder={config?.placeholder}
         disabled={readonly}
         className={`pr-10 ${className || ''}`}
-        {...props}
       />
       <Button
         type="button"

packages/fields/src/widgets/PercentField.tsx

@@ -31,6 +31,7 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
   return (
     <div className="relative">
       <Input
+        {...props}
         type="number"
         value={displayValue}
         onChange={handleChange}
@@ -39,7 +40,6 @@ export function PercentField({ value, onChange, field, readonly, errorMessage, c
         className={`pr-8 ${className || ''}`}
         step={Math.pow(10, -precision).toFixed(precision)}
         aria-invalid={!!errorMessage}
-        {...props}
       />
       <span className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500">
         %

packages/fields/src/widgets/PhoneField.tsx

@@ -18,13 +18,13 @@ export function PhoneField({ value, onChange, field, readonly, errorMessage, ...
 
   return (
     <Input
+      {...props}
       type="tel"
       value={value || ''}
       onChange={(e) => onChange(e.target.value)}
       placeholder={config?.placeholder || '(555) 123-4567'}
       disabled={readonly}
       aria-invalid={!!errorMessage}
-      {...props}
     />
   );
 }

packages/fields/src/widgets/SelectField.tsx

@@ -20,10 +20,10 @@ export function SelectField({ value, onChange, field, readonly, ...props }: Fiel
 
   return (
     <Select 
+      {...props}
       value={value} 
       onValueChange={onChange}
       disabled={readonly}
-      {...props}
     >
       <SelectTrigger className={props.className}>
         <SelectValue placeholder={config?.placeholder || "Select an option"} />