Input

1import { forwardRef, type InputHTMLAttributes } from "react";
2import { cn } from "@/lib/utils";
3import { focusRing, glass } from "@/lib/glass";
4 
5interface InputProps extends InputHTMLAttributes<HTMLInputElement> {}
6 
7export const Input = forwardRef<HTMLInputElement, InputProps>(
8  ({ className = "", ...props }, ref) => {
9    const baseClasses = cn(
10      glass,
11      focusRing,
12      // Gentler 12px radius (not the 32px surface radius), compact height,
13      // and lighter text — fields should read as fields, not big pills.
14      "h-10 w-full rounded-xl px-3.5 text-sm font-normal placeholder:text-current/40",
15      "file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-current",
16      "disabled:cursor-not-allowed disabled:opacity-50",
17    );
18 
19    return (
20      <input ref={ref} className={cn(baseClasses, className)} {...props} />
21    );
22  },
23);
24 
25Input.displayName = "Input";