Input Group

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4/**
5 * A bordered container that joins an input with leading/trailing addons
6 * (icons, text, or buttons) into a single neubrutalism field.
7 */
8const InputGroup = React.forwardRef<
9  HTMLDivElement,
10  React.HTMLAttributes<HTMLDivElement>
11>(({ className, ...props }, ref) => (
12  <div
13    ref={ref}
14    className={cn(
15      'flex items-stretch border-3 border-foreground bg-background shadow-[4px_4px_0px_hsl(var(--shadow-color))] transition focus-within:translate-x-[2px] focus-within:translate-y-[2px] focus-within:shadow-none',
16      className
17    )}
18    {...props}
19  />
20))
21InputGroup.displayName = 'InputGroup'
22 
23const InputGroupInput = React.forwardRef<
24  HTMLInputElement,
25  React.InputHTMLAttributes<HTMLInputElement>
26>(({ className, ...props }, ref) => (
27  <input
28    ref={ref}
29    className={cn(
30      'w-full flex-1 bg-transparent px-3 py-2 text-sm font-medium outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
31      className
32    )}
33    {...props}
34  />
35))
36InputGroupInput.displayName = 'InputGroupInput'
37 
38export interface InputGroupAddonProps
39  extends React.HTMLAttributes<HTMLDivElement> {
40  position?: 'leading' | 'trailing'
41}
42 
43const InputGroupAddon = React.forwardRef<HTMLDivElement, InputGroupAddonProps>(
44  ({ className, position = 'leading', ...props }, ref) => (
45    <div
46      ref={ref}
47      className={cn(
48        'flex items-center bg-muted px-3 text-sm font-bold uppercase tracking-wide text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0',
49        position === 'leading' ? 'border-r-3 border-foreground' : 'border-l-3 border-foreground',
50        className
51      )}
52      {...props}
53    />
54  )
55)
56InputGroupAddon.displayName = 'InputGroupAddon'
57 
58export { InputGroup, InputGroupInput, InputGroupAddon }