fix: update InputGroup to match latest shadcn patterns

- Update InputGroupAddon align prop to use inline-start/inline-end (and block-start/block-end)
- Add min-w-0 class to InputGroup component per shadcn changelog
- Fix className prop conflict in TextField (only apply to FormItem, not InputGroupInput)
- Update TextField to use correct align values

Author: jaruesink

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

@@ -16,7 +16,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       role="group"
       className={cn(
         // Simple wrapper with focus-within ring, matching original design
-        'group flex w-full rounded-md transition-all duration-200',
+        'group flex w-full min-w-0 rounded-md transition-all duration-200',
         'focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 focus-within:ring-offset-background',
         className,
       )}
@@ -27,22 +27,28 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 
 function InputGroupAddon({
   className,
-  align = 'start',
+  align = 'inline-start',
   ...props
-}: React.ComponentProps<'div'> & { align?: 'start' | 'end' }) {
-  const isPrefix = align === 'start';
-  const isSuffix = align === 'end';
+}: React.ComponentProps<'div'> & { align?: 'inline-start' | 'inline-end' | 'block-start' | 'block-end' }) {
+  const isInlineStart = align === 'inline-start';
+  const isInlineEnd = align === 'inline-end';
+  const isBlockStart = align === 'block-start';
+  const isBlockEnd = align === 'block-end';
 
   return (
     <div
       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',
+        // Inline-start styling (left side)
+        isInlineStart && 'pl-3 pr-0 rounded-l-md border-r-0',
+        // Inline-end styling (right side)
+        isInlineEnd && 'pr-3 pl-0 rounded-r-md border-l-0',
+        // Block-start styling (above)
+        isBlockStart && 'border-b-0 rounded-b-none',
+        // Block-end styling (below)
+        isBlockEnd && 'border-t-0 rounded-t-none',
         className,
       )}
       {...props}

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

@@ -55,10 +55,11 @@ export const TextField = function TextField({
             {label && <FormLabel Component={components?.FormLabel}>{label}</FormLabel>}
             {hasAddon ? (
               // New shadcn/ui InputGroup pattern
+              // Note: Addons are placed after input in DOM for focus management, but align prop handles visual positioning
               <FormControl Component={components?.FormControl}>
                 <InputGroup>
                   {prefix && (
-                    <InputGroupAddon align="start">
+                    <InputGroupAddon align="inline-start">
                       <InputGroupText>{prefix}</InputGroupText>
                     </InputGroupAddon>
                   )}
@@ -67,13 +68,13 @@ export const TextField = function TextField({
                     {...props}
                     ref={ref}
                     aria-invalid={fieldState.error ? 'true' : 'false'}
-                    className={cn(className, {
+                    className={cn({
                       'rounded-l-none border-l-0': prefix,
                       'rounded-r-none border-r-0': suffix,
                     })}
                   />
                   {suffix && (
-                    <InputGroupAddon align="end">
+                    <InputGroupAddon align="inline-end">
                       <InputGroupText>{suffix}</InputGroupText>
                     </InputGroupAddon>
                   )}
@@ -82,7 +83,7 @@ export const TextField = function TextField({
             ) : (
               // Original pattern without addons
               <FormControl Component={components?.FormControl}>
-                <InputComponent {...field} {...props} ref={ref} />
+                <InputComponent {...field} {...props} ref={ref} className={className} />
               </FormControl>
             )}
             {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}