fix: properly coordinate borders and border-radius between input and addons

Fix the border and border-radius coordination so prefix/suffix addons connect
seamlessly with the input field without visible gaps.

Changes:
- Move border/radius removal logic from InputGroupInput to TextField
- TextField now explicitly passes 'rounded-l-none border-l-0' when prefix exists
- TextField now explicitly passes 'rounded-r-none border-r-0' when suffix exists
- Simplified InputGroupInput to just handle base styling
- This matches the original implementation's approach exactly

Result: Borders and corners now connect cleanly between addons and input,
matching the original FieldPrefix/FieldSuffix behavior.

Requested by: Jake Ruesink

Author: codegen-sh[bot]

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

@@ -128,11 +128,8 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>)
       data-slot="input-group-control"
       className={cn(
         // Match original input styling but remove focus ring/offset (handled by wrapper)
-        // Remove left border and radius if prefix exists, remove right if suffix exists
+        // Border removal for prefix/suffix should be handled by the parent component
         'flex-1 focus-visible:ring-0 focus-visible:ring-offset-0 border-input',
-        // Conditionally remove borders based on presence of addons
-        'group-has-[>[data-align=inline-start]]:rounded-l-none group-has-[>[data-align=inline-start]]:border-l-0',
-        'group-has-[>[data-align=inline-end]]:rounded-r-none group-has-[>[data-align=inline-end]]:border-r-0',
         className,
       )}
       {...props}

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

@@ -96,7 +96,16 @@ export const TextField = function TextField({
                       <InputGroupText>{prefix}</InputGroupText>
                     </InputGroupAddon>
                   )}
-                  <InputGroupInput {...field} {...props} ref={ref} aria-invalid={fieldState.error ? 'true' : 'false'} />
+                  <InputGroupInput
+                    {...field}
+                    {...props}
+                    ref={ref}
+                    aria-invalid={fieldState.error ? 'true' : 'false'}
+                    className={cn(props.className, {
+                      'rounded-l-none border-l-0': prefix,
+                      'rounded-r-none border-r-0': suffix,
+                    })}
+                  />
                   {suffix && (
                     <InputGroupAddon align="inline-end">
                       <InputGroupText>{suffix}</InputGroupText>