textarea

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5import "./textarea.css"
6 
7/* ------------------------------------------------------------------ */
8/*  CVA                                                                */
9/* ------------------------------------------------------------------ */
10 
11const textareaVariants = cva(
12  "textarea-base flex w-full text-content-note font-regular resize-y",
13  {
14    variants: {
15      variant: {
16        default: "",
17        destructive: "textarea-destructive",
18      },
19      size: {
20        sm: "min-h-[6.25rem] p-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note",
21        md: "min-h-[8.125rem] p-[var(--layout-padding-md)] rounded-[var(--layout-radius-lg)] text-content-note",
22        lg: "min-h-[10.375rem] p-[var(--layout-padding-lg)] rounded-[var(--layout-radius-xl)] text-content-body",
23      },
24    },
25    defaultVariants: {
26      variant: "default",
27      size: "md",
28    },
29  }
30)
31 
32const textareaHintVariants = cva("textarea-hint text-content-note", {
33  variants: {
34    variant: {
35      default: "",
36      destructive: "textarea-hint-destructive",
37    },
38  },
39  defaultVariants: {
40    variant: "default",
41  },
42})
43 
44/* ------------------------------------------------------------------ */
45/*  Textarea                                                           */
46/* ------------------------------------------------------------------ */
47 
48function Textarea({
49  className,
50  variant,
51  size,
52  ...props
53}: React.ComponentProps<"textarea"> &
54  VariantProps<typeof textareaVariants>) {
55  return (
56    <textarea
57      data-slot="textarea"
58      aria-invalid={variant === "destructive" || undefined}
59      className={cn(textareaVariants({ variant, size, className }))}
60      {...props}
61    />
62  )
63}
64 
65/* ------------------------------------------------------------------ */
66/*  TextareaField                                                      */
67/*  @deprecated Use <Field> from '@/components/ui/field' instead.      */
68/* ------------------------------------------------------------------ */
69 
70/** @deprecated Use `<Field>` from `@/components/ui/field` instead. */
71function TextareaField({
72  className,
73  children,
74  ...props
75}: React.ComponentProps<"div">) {
76  return (
77    <div
78      data-slot="textarea-field"
79      className={cn(
80        "flex flex-col gap-[var(--layout-gap-md)] w-full",
81        className
82      )}
83      {...props}
84    >
85// … truncated