Input

1'use client'
2 
3import { Input as InputPrimitive } from '@base-ui/react/input'
4import * as React from 'react'
5 
6import { cn } from '@/lib/utils'
7 
8function Input({ className, type, ref, ...props }: React.ComponentProps<'input'>) {
9  return (
10    <InputPrimitive
11      ref={ref}
12      type={type}
13      data-slot='input'
14      data-type={type}
15      className={cn(
16        // No `outline-none` here: it sets `--tw-outline-style: none` globally
17        // on the element, which then suppresses the focus outline below
18        // (which reads `outline-style: var(--tw-outline-style)`).
19        'h-12 w-full min-w-0 rounded-sm px-4 py-2 text-base motion-safe:transition-colors',
20        // Every colour routes through the --input-* semantic tokens (layer 3,
21        // theme.css / the registry theme item). Dark mode and brand themes
22        // restyle the input by remapping tokens — no dark: variants here.
23        'border border-(--input-border) bg-(--input-surface) text-(--input-foreground)',
24        // Hover
25        'hover:bg-(--input-surface-hover)',
26        // Focus — `focus-visible:` per the design-system policy (matches
27        // Button/Link). For text fields this is behaviour-preserving:
28        // browsers flag keyboard-editable controls as :focus-visible even
29        // when focused by pointer, so the ring still shows on click.
30        'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--input-ring)',
31        // File input slot
32        'file:inline-flex file:h-8 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-(--input-foreground)',
33        // Placeholder styles
34        'placeholder:text-(--input-placeholder)',
35        // Disabled
36        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
37        // Invalid — 2px danger border, danger hover surface (Figma error variants)
38        'aria-invalid:border-2 aria-invalid:border-(--input-invalid-border) aria-invalid:hover:bg-(--input-invalid-surface-hover) aria-invalid:focus-visible:outline-(--input-invalid-ring)',
39        className,
40      )}
41      {...props}
42    />
43  )
44}
45 
46export { Input }
47 
48export type InputProps = React.ComponentProps<typeof Input>