veza/apps/web/src/components/ui/input.tsx

import * as React from 'react';
import { cn } from '@/lib/utils';

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  icon?: React.ReactNode;
  label?: string;
  /** Error message to display below the input */
  error?: string;
}

import { Search } from 'lucide-react';
import { Label } from './label';
import { FileUpload as BaseFileUpload } from './file-upload';

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, icon, label, error, id, ...props }, ref) => {
    const errorId = React.useId();
    return (
      <div className="space-y-2 w-full">
        {label && <Label htmlFor={id} className="text-xs font-mono text-muted-foreground uppercase tracking-widest">{label}</Label>}
        <div className="relative group">
          {icon && (
            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors duration-[var(--duration-fast)] pointer-events-none">
              {icon}
            </div>
          )}
          <input
            id={id}
            type={type}
            aria-invalid={!!error}
            aria-describedby={error ? errorId : undefined}
            className={cn(
              "flex h-11 w-full rounded-xl border border-white/10 bg-black/40 px-3 py-2 text-sm text-white placeholder:text-muted-foreground/50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
              "backdrop-blur-sm transition-all duration-[var(--duration-fast)]",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
              "focus-visible:shadow-[0_0_0_3px_oklch(var(--primary)/0.15),0_0_12px_oklch(var(--primary)/0.1)]",
              "hover:bg-white/5 hover:border-white/20",
              icon && "pl-10",
              error && "border-destructive focus-visible:ring-destructive/30",
              className
            )}
            ref={ref}
            {...props}
          />
        </div>
        {error && (
          <p id={errorId} className="text-xs text-destructive mt-1 animate-shake">{error}</p>
        )}
      </div>
    );
  }
);
Input.displayName = 'Input';


const SearchInput = React.forwardRef<HTMLInputElement, InputProps>(
  (props, ref) => <Input {...props} ref={ref} icon={<Search className="w-4 h-4" />} />
);
SearchInput.displayName = 'SearchInput';

// Shim for legacy FileUpload usage
const FileUpload = (props: any) => (
  <div className="space-y-2">
    <BaseFileUpload onFileSelect={() => { }} {...props} />
  </div>
);

export { Input, SearchInput, FileUpload };