Input

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
5  label?: string
6  error?: string
7  prefix?: string
8}
9 
10const Input = React.forwardRef<HTMLInputElement, InputProps>(
11  ({ className, label, error, prefix, id, style, ...props }, ref) => {
12    const inputId = id ?? label?.toLowerCase().replace(/\s+/g, '-')
13 
14    return (
15      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem', width: '100%' }}>
16        {label && (
17          <label
18            htmlFor={inputId}
19            style={{
20              fontSize:      '0.65rem',
21              color:         error ? 'var(--color-amber)' : 'var(--text-muted)',
22              letterSpacing: '0.12em',
23              textTransform: 'uppercase',
24            }}
25          >
26            {label}
27          </label>
28        )}
29 
30        <div style={{ position: 'relative', display: 'flex', alignItems: 'center' }}>
31          {prefix && (
32            <span
33              style={{
34                position:     'absolute',
35                left:         '0.625rem',
36                color:        'var(--text-muted)',
37                fontSize:     '0.8rem',
38                pointerEvents:'none',
39                userSelect:   'none',
40              }}
41            >
42              {prefix}
43            </span>
44          )}
45          <input
46            ref={ref}
47            id={inputId}
48            className={cn(
49              'w-full h-9 bg-[var(--surface)] font-mono text-[0.8rem]',
50              'border border-[var(--border)]',
51              'text-[var(--text-secondary)]',
52              'placeholder:text-[var(--text-muted)]',
53              'outline-none rounded-none',
54              'transition-all duration-150',
55              'focus:border-[var(--border-active)] focus:shadow-[var(--glow-green)]',
56              'disabled:opacity-40 disabled:cursor-not-allowed',
57              error && 'border-[var(--color-amber)] focus:shadow-[var(--glow-amber)]',
58              className
59            )}
60            style={{
61              padding: prefix ? '0 0.75rem 0 1.75rem' : '0 0.75rem',
62              caretColor: 'var(--color-green)',
63              ...style,
64            }}
65            {...props}
66          />
67        </div>
68 
69        {error && (
70          <span
71            style={{
72              fontSize:      '0.65rem',
73              color:         'var(--color-amber)',
74              letterSpacing: '0.06em',
75            }}
76          >
77// … truncated