Input

1import { Input as InputPrimitive } from "@base-ui/react/input";
2import { cn } from "@/lib/classes";
3
4export interface InputProps extends Omit<InputPrimitive.Props, "size"> {
5  size?: "sm" | "default" | "lg" | number;
6}
7
8function Input({ className, size = "default", ...props }: InputProps) {
9  return (
10    <InputPrimitive
11      data-slot="input"
12      className={cn(
13        "relative w-full min-w-0 rounded-lg border border-input/70 bg-background dark:bg-input/32 shadow-xs text-base/5 sm:text-sm px-3 py-2 h-9 outline-none placeholder:text-muted-foreground/80 [transition:box-shadow_150ms_ease-out]",
14        // Focus State
15        "focus-visible:border-ring focus-visible:ring-[1px] focus-visible:ring-border",
16        "disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/16 [disabled,focus-visible,aria-invalid]:shadow-none dark:aria-invalid:ring-destructive/24",
17        size === "sm" && "h-8 px-3",
18        size === "lg" && "h-10 px-6",
19        props.type === "search" &&
20          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
21        props.type === "file" &&
22          "text-muted-foreground file:me-3 file:bg-transparent file:text-sm file:font-medium file:text-foreground",
23        className
24      )}
25      size={typeof size === "number" ? size : undefined}
26      {...props}
27    />
28  );
29}
30
31export { Input };