refactor: simplify InputGroup components and remove backward compatibility

Complete refactor focusing purely on the new InputGroup implementation
without backward compatibility concerns.

Changes:
- Removed deprecated FieldPrefix and FieldSuffix components entirely
- Simplified InputGroup wrapper to just focus-within ring
- Rewrote InputGroupAddon with simple 'start'/'end' alignment (not inline-start/inline-end)
- Removed CVA variants in favor of simple conditional logic (isPrefix/isSuffix)
- Fixed height to h-10 for proper alignment with inputs
- Explicitly remove borders on connecting sides (border-r-0 for prefix, border-l-0 for suffix)
- Simplified InputGroupText to just whitespace-nowrap
- TextField explicitly passes rounded-l-none/border-l-0 for prefix and rounded-r-none/border-r-0 for suffix

Result: Clean, simple implementation matching the original Lambda Curry design
with proper border/radius coordination between addons and input.

Requested by: Jake Ruesink

Author: codegen-sh[bot]

packages/components/src/ui/input-group.tsx

@@ -15,63 +15,36 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="input-group"
       role="group"
       className={cn(
-        // Match original TextField wrapper styling: simple border with focus-within ring
-        'group/input-group flex w-full rounded-md transition-all duration-200',
+        // Simple wrapper with focus-within ring, matching original design
+        'group flex w-full rounded-md transition-all duration-200',
         'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background',
-
-        // Variants based on alignment - simplified to match original behavior
-        'has-[>[data-align=inline-start]]:[&>input]:pl-2',
-        'has-[>[data-align=inline-end]]:[&>input]:pr-2',
-        'has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-
         className,
       )}
       {...props}
     />
   );
 }
 
-const inputGroupAddonVariants = cva(
-  // Match original FieldPrefix/FieldSuffix styling: simple borders with gray text
-  'flex h-full text-base items-center text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200 border-y border-input bg-background',
-  {
-    variants: {
-      align: {
-        // inline-start = prefix (left side)
-        'inline-start': 'order-first pl-3 pr-0 border-l rounded-l-md',
-        // inline-end = suffix (right side)
-        'inline-end': 'order-last pr-3 pl-0 border-r rounded-r-md',
-        // block alignment for advanced use cases
-        'block-start': 'order-first w-full justify-start px-3 pt-3 pb-2',
-        'block-end': 'order-last w-full justify-start px-3 pt-2 pb-3',
-      },
-    },
-    defaultVariants: {
-      align: 'inline-start',
-    },
-  },
-);
-
 function InputGroupAddon({
   className,
-  align = 'inline-start',
+  align = 'start',
   ...props
-}: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>) {
+}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
+  const isPrefix = align === 'start';
+  const isSuffix = align === 'end';
+
   return (
-    // biome-ignore lint/a11y/useSemanticElements: role="group" is appropriate for input group addons per WAI-ARIA
-    // biome-ignore lint/a11y/useKeyWithClickEvents: onClick is for focus management, not interactive action
     <div
-      role="group"
-      data-slot="input-group-addon"
-      data-align={align}
-      className={cn(inputGroupAddonVariants({ align }), className)}
-      onClick={(e) => {
-        if ((e.target as HTMLElement).closest('button')) {
-          return;
-        }
-        e.currentTarget.parentElement?.querySelector('input')?.focus();
-      }}
+      className={cn(
+        // Base styling matching original FieldPrefix/FieldSuffix
+        'flex h-10 items-center text-base text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200',
+        'border border-input bg-background',
+        // Prefix styling (left side)
+        isPrefix && 'pl-3 pr-0 rounded-l-md border-r-0',
+        // Suffix styling (right side)
+        isSuffix && 'pr-3 pl-0 rounded-r-md border-l-0',
+        className,
+      )}
       {...props}
     />
   );
@@ -110,16 +83,7 @@ function InputGroupButton({
 }
 
 function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
-  return (
-    <span
-      className={cn(
-        // Match original FieldPrefix/FieldSuffix inner span: simple whitespace-nowrap
-        'whitespace-nowrap',
-        className,
-      )}
-      {...props}
-    />
-  );
+  return <span className={cn('whitespace-nowrap', className)} {...props} />;
 }
 
 function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>) {

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

@@ -13,40 +13,6 @@ import { type InputProps, TextInput } from './text-input';
 import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from './input-group';
 import { cn } from './utils';
 
-/**
- * @deprecated Use InputGroupAddon with InputGroupText instead
- * These components are kept for backward compatibility but will be removed in a future version.
- */
-export const FieldPrefix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
-  return (
-    <div
-      className={cn(
-        'flex h-full text-base items-center pl-3 pr-0 text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200 border-y border-l border-input rounded-l-md bg-background',
-        className,
-      )}
-    >
-      <span className="whitespace-nowrap">{children}</span>
-    </div>
-  );
-};
-
-/**
- * @deprecated Use InputGroupAddon with InputGroupText instead
- * These components are kept for backward compatibility but will be removed in a future version.
- */
-export const FieldSuffix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
-  return (
-    <div
-      className={cn(
-        'flex h-full text-base items-center pr-3 pl-0 text-gray-500 group-focus-within:text-gray-700 transition-colors duration-200 border-y border-r border-input rounded-r-md bg-background',
-        className,
-      )}
-    >
-      <span className="whitespace-nowrap">{children}</span>
-    </div>
-  );
-};
-
 // Create a specific interface for the input props that includes className explicitly
 export interface TextInputProps extends Omit<InputProps, 'prefix' | 'suffix'> {
   control?: Control<FieldValues>;
@@ -92,7 +58,7 @@ export const TextField = function TextField({
               <FormControl Component={components?.FormControl}>
                 <InputGroup>
                   {prefix && (
-                    <InputGroupAddon>
+                    <InputGroupAddon align="start">
                       <InputGroupText>{prefix}</InputGroupText>
                     </InputGroupAddon>
                   )}
@@ -107,7 +73,7 @@ export const TextField = function TextField({
                     })}
                   />
                   {suffix && (
-                    <InputGroupAddon align="inline-end">
+                    <InputGroupAddon align="end">
                       <InputGroupText>{suffix}</InputGroupText>
                     </InputGroupAddon>
                   )}