Merge pull request #55 from lambda-curry/codegen-bot/add-custom-input-to-textfield

Author: jaruesink

packages/components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

packages/components/src/remix-hook-form/text-field.tsx

@@ -8,11 +8,17 @@ export type TextFieldProps = Omit<BaseTextFieldProps, 'control'>;
 export function TextField(props: TextFieldProps) {
   const { control } = useRemixFormContext();
 
+  // Merge the provided components with the default form components
+  const defaultComponents = {
+    FormControl,
+    FormLabel,
+    FormDescription,
+    FormMessage,
+  };
+  
   const components = {
-    FormControl: FormControl,
-    FormLabel: FormLabel,
-    FormDescription: FormDescription,
-    FormMessage: FormMessage,
+    ...defaultComponents,
+    ...props.components,
   };
 
   return <BaseTextField control={control} components={components} {...props} />;

packages/components/src/ui/text-field.tsx

@@ -56,7 +56,9 @@ export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   name: FieldPath<FieldValues>;
   label?: string;
   description?: string;
-  components?: Partial<FieldComponents>;
+  components?: Partial<FieldComponents> & {
+    Input?: React.ComponentType<InputProps>;
+  };
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   className?: string;
@@ -73,6 +75,9 @@ export const TextField = ({
   suffix,
   ...props
 }: TextInputProps) => {
+  // Use the custom Input component if provided, otherwise use the default TextInput
+  const InputComponent = components?.Input || TextInput;
+
   return (
     <FormField
       control={control}
@@ -90,7 +95,7 @@ export const TextField = ({
             >
               {prefix && <FieldPrefix>{prefix}</FieldPrefix>}
               <FormControl Component={components?.FormControl}>
-                <TextInput
+                <InputComponent
                   {...field}
                   {...props}
                   className={cn('focus-visible:ring-0 focus-visible:ring-offset-0 border-input', {