textarea

1import * as React from 'react';
2import { cva, type VariantProps } from 'class-variance-authority';
3 
4import { cn } from '@/registry/lib/utils';
5 
6const textareaVariants = cva(
7  'w-full min-h-16 rounded-md px-3 py-3 text-base text-primary transition-colors outline-none placeholder:text-muted focus-visible:ring-[3px] focus-visible:ring-focus/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',
8  {
9    variants: {
10      variant: {
11        surface: 'border border-line-ui bg-ui/50 focus-visible:border-focus',
12        outline: 'border border-line-ui shadow-2xs focus-visible:border-focus',
13        soft: 'bg-ui focus-visible:ring-focus',
14      },
15      autoResize: {
16        true: 'field-sizing-content resize-none',
17        false: 'resize-y',
18      },
19    },
20    defaultVariants: {
21      variant: 'surface',
22      autoResize: true,
23    },
24  }
25);
26 
27function Textarea({
28  className,
29  variant,
30  autoResize,
31  ...props
32}: React.ComponentProps<'textarea'> & VariantProps<typeof textareaVariants>) {
33  return (
34    <textarea
35      data-slot="textarea"
36      data-variant={variant}
37      className={cn(textareaVariants({ variant, autoResize, className }))}
38      {...props}
39    />
40  );
41}
42 
43export { Textarea, textareaVariants };