Input

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3import { Input as BaseInput } from "@base-ui/react/input";
4
5import { cn } from "@/lib/utils";
6
7const inputVariants = cva(
8  [
9    "placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
10    "border bg-clip-padding",
11    "flex w-full min-w-0 rounded-lg",
12    "text-base transition-colors duration-200 md:text-sm",
13    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60",
14    "file:text-foreground file:inline-flex file:h-7 file:rounded-md file:border-0 file:bg-transparent file:text-sm file:font-medium",
15    "focus-visible:outline-ring/50 outline-0 outline-offset-0 outline-transparent transition-[outline-width,outline-offset,outline-color] duration-100 ease-out outline-solid focus-visible:outline-2 focus-visible:outline-offset-2",
16    "aria-invalid:outline-destructive/50 aria-invalid:outline-2 aria-invalid:outline-offset-2 aria-invalid:outline-solid font-normal",
17  ],
18  {
19    variants: {
20      variant: {
21        // Opaque bg — use on the page or any non-elevated substrate.
22        default: "bg-input",
23        // Translucent overlay — use inside Cards, Dialogs, or any elevated
24        // surface where the opaque default would collapse into its parent.
25        elevated: "bg-input-elevated",
26      },
27      size: {
28        default: "h-10 px-3 py-2 sm:h-9",
29        sm: "h-9 px-2.5 py-1.5 sm:h-8",
30      },
31    },
32    defaultVariants: {
33      variant: "default",
34      size: "default",
35    },
36  },
37);
38
39type InputProps = Omit<React.ComponentProps<typeof BaseInput>, "size"> &
40  VariantProps<typeof inputVariants>;
41
42function Input({ className, size, variant, ...props }: InputProps) {
43  return (
44    <BaseInput
45      data-slot="input"
46      className={cn(inputVariants({ size, variant }), className)}
47      {...props}
48    />
49  );
50}
51
52export { Input, inputVariants, type InputProps };