textarea

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const textareaVariants = cva(
7  "flex field-sizing-content w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 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",
8  {
9    variants: {
10      size: {
11        xs: "min-h-12 rounded-[min(var(--radius-md),8px)] px-2 py-1 text-xs",
12        sm: "min-h-14 rounded-[min(var(--radius-md),10px)] px-2.5 py-1.5 text-sm",
13        default: "min-h-16 px-2.5 py-2 text-base md:text-sm",
14        lg: "min-h-18 px-2.5 py-2 text-base md:text-sm",
15        xl: "min-h-20 rounded-lg px-3 py-2.5 text-base",
16        "2xl": "min-h-24 rounded-xl px-4 py-3 text-lg",
17      },
18    },
19    defaultVariants: {
20      size: "default",
21    },
22  }
23)
24 
25function Textarea({
26  className,
27  size = "default",
28  ...props
29}: Omit<React.ComponentProps<"textarea">, "size"> &
30  VariantProps<typeof textareaVariants>) {
31  return (
32    <textarea
33      data-slot="textarea"
34      className={cn(textareaVariants({ size, className }))}
35      {...props}
36    />
37  )
38}
39 
40export { Textarea, textareaVariants }