refactor: match InputGroup styling to original Lambda Curry aesthetic

Update InputGroup component styles to match the simpler, cleaner look of the
original FieldPrefix/FieldSuffix implementation instead of shadcn's default styling.

Changes:
- Simplified InputGroup wrapper: removed shadow-xs, dark mode backgrounds, complex borders
- Updated to use simple focus-within ring (matching original wrapper behavior)
- Changed InputGroupAddon to use text-base (not text-sm) and gray-500/gray-700 colors
- Added proper border styling: border-y + border-l/r for prefix/suffix
- Simplified InputGroupText to just whitespace-nowrap (matching original)
- Updated InputGroupInput to conditionally remove borders/radius based on addons

Result: Inputs with prefix/suffix now match the original Lambda Curry design
while using the official shadcn/ui component architecture underneath.

Requested by: Jake Ruesink

Author: codegen-sh[bot]

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

@@ -15,20 +15,15 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
       data-slot="input-group"
       role="group"
       className={cn(
-        'group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full min-w-0 items-center rounded-md border outline-none transition-[color,box-shadow]',
-        'h-9 has-[>textarea]:h-auto',
+        // Match original TextField wrapper styling: simple border with focus-within ring
+        'group/input-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.
+        // 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]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3',
-        'has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3',
-
-        // Focus state.
-        'has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1',
-
-        // Error state.
-        'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+        '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,
       )}
@@ -38,15 +33,18 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 const inputGroupAddonVariants = cva(
-  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  // 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': 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
-        'inline-end': 'order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]',
-        'block-start':
-          '[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5',
-        'block-end': '[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5',
+        // 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: {
@@ -115,7 +113,8 @@ function InputGroupText({ className, ...props }: React.ComponentProps<'span'>) {
   return (
     <span
       className={cn(
-        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        // Match original FieldPrefix/FieldSuffix inner span: simple whitespace-nowrap
+        'whitespace-nowrap',
         className,
       )}
       {...props}
@@ -128,7 +127,12 @@ function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>)
     <TextInput
       data-slot="input-group-control"
       className={cn(
-        'flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent',
+        // 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
+        '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}