From 1d44933708f16cc4283f6f46fc31be5e66c6b2ce Mon Sep 17 00:00:00 2001
From: Mohsen <mohsen@lambdacurry.dev>
Date: Wed, 13 Aug 2025 15:53:56 +0300
Subject: [PATCH] feat: enhance TextField component with additional className
 props

- Updated TextInputProps interface to include groupClassName, prefixClassName, and suffixClassName for better customization.
- Modified TextField component to utilize new className props for FieldPrefix and FieldSuffix, improving styling flexibility.
---
 packages/components/package.json          |  2 +-
 packages/components/src/ui/text-field.tsx | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/packages/components/package.json b/packages/components/package.json
index cd1945a4..c8eb783b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@lambdacurry/forms",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
diff --git a/packages/components/src/ui/text-field.tsx b/packages/components/src/ui/text-field.tsx
index 6777363c..face389c 100644
--- a/packages/components/src/ui/text-field.tsx
+++ b/packages/components/src/ui/text-field.tsx
@@ -54,7 +54,7 @@ export const FieldSuffix = ({
 export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   control?: Control<FieldValues>;
   name: FieldPath<FieldValues>;
-  label?: string | React.ReactNode;
+  label?: string;
   description?: string;
   components?: Partial<FieldComponents> & {
     Input?: React.ComponentType<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -62,6 +62,9 @@ export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   prefix?: React.ReactNode;
   suffix?: React.ReactNode;
   className?: string;
+  groupClassName?: string;
+  prefixClassName?: string;
+  suffixClassName?: string;
 }
 
 export const TextField = function TextField({
@@ -74,6 +77,9 @@ export const TextField = function TextField({
   prefix,
   suffix,
   ref,
+  groupClassName,
+  prefixClassName,
+  suffixClassName,
   ...props
 }: TextInputProps & { ref?: React.Ref<HTMLInputElement> }) {
   // Use the custom Input component if provided, otherwise use the default TextInput
@@ -91,10 +97,10 @@ export const TextField = function TextField({
               className={cn('flex group transition-all duration-200 rounded-md', {
                 'field__input--with-prefix': prefix,
                 'field__input--with-suffix': suffix,
-                'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background': true,
-              })}
+                'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background': true
+              }, groupClassName)}
             >
-              {prefix && <FieldPrefix>{prefix}</FieldPrefix>}
+              {prefix && <FieldPrefix className={prefixClassName}>{prefix}</FieldPrefix>}
               <FormControl Component={components?.FormControl}>
                 <InputComponent
                   {...field}
@@ -106,7 +112,7 @@ export const TextField = function TextField({
                   })}
                 />
               </FormControl>
-              {suffix && <FieldSuffix>{suffix}</FieldSuffix>}
+              {suffix && <FieldSuffix className={suffixClassName}>{suffix}</FieldSuffix>}
             </div>
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
             {fieldState.error && (