input

1import * as React from "react"
2import { Input as InputPrimitive } from "@base-ui/react/input"
3import { cva, type VariantProps } from "class-variance-authority"
4 
5import { cn } from "@/lib/utils"
6 
7const inputVariants = cva(
8  "w-full min-w-0 rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
9  {
10    variants: {
11      size: {
12        xs: "h-6 rounded-[min(var(--radius-md),8px)] px-2 py-1 text-xs file:h-5 file:text-xs",
13        sm: "h-8 rounded-[min(var(--radius-md),10px)] px-2.5 py-1 text-sm file:h-6 file:text-xs",
14        default: "h-9 px-2.5 py-1 text-base md:text-sm file:h-7 file:text-sm",
15        lg: "h-10 px-2.5 py-1 text-base md:text-sm file:h-8 file:text-sm",
16        xl: "h-11 rounded-lg px-3 py-1 text-base file:h-9 file:text-base",
17        "2xl": "h-13 rounded-xl px-4 py-1 text-lg file:h-11 file:text-lg",
18      },
19    },
20    defaultVariants: {
21      size: "default",
22    },
23  }
24)
25 
26function Input({
27  className,
28  type,
29  size = "default",
30  ...props
31}: Omit<React.ComponentProps<"input">, "size"> &
32  VariantProps<typeof inputVariants>) {
33  return (
34    <InputPrimitive
35      type={type}
36      data-slot="input"
37      className={cn(inputVariants({ size, className }))}
38      {...props}
39    />
40  )
41}
42 
43export { Input, inputVariants }