Textarea

1'use client';
2 
3import { type VariantProps, cva } from 'class-variance-authority';
4import * as React from 'react';
5 
6import { inputFocusRingWidth, inputVariantStyles } from '@/components/ui/input';
7import { cn } from '@/lib/utils';
8 
9const textareaVariants = cva(
10  'flex w-full rounded-none outline-none transition-[border-color,box-shadow,background-color] font-normal min-h-[108px] selection:bg-fill-active selection:text-fg-primary-inverse',
11  {
12    variants: {
13      variant: {
14        default: [
15          inputVariantStyles.default.base,
16          inputVariantStyles.default.text,
17          inputVariantStyles.default.hover,
18          inputVariantStyles.default.focus,
19          inputVariantStyles.default.error,
20          inputVariantStyles.default.disabled,
21        ],
22      },
23      size: {
24        sm: 'paragraph-small-primary p-3',
25        default: 'paragraph-regular-primary p-3',
26        lg: 'paragraph-large-primary p-3',
27      },
28    },
29    compoundVariants: [
30      { variant: 'default', size: 'sm', className: inputFocusRingWidth.sm },
31      {
32        variant: 'default',
33        size: 'default',
34        className: inputFocusRingWidth.default,
35      },
36      { variant: 'default', size: 'lg', className: inputFocusRingWidth.lg },
37    ],
38    defaultVariants: {
39      variant: 'default',
40      size: 'default',
41    },
42  },
43);
44 
45type TextareaContextValue = {
46  hasRoot: boolean;
47  count: number;
48  maxCharacters?: number;
49  size?: 'sm' | 'default' | 'lg';
50  registerTextarea: (ref: HTMLTextAreaElement | null) => void;
51  formProps?: Pick<
52    React.ComponentProps<'textarea'>,
53    'aria-invalid' | 'aria-describedby' | 'id'
54  >;
55};
56 
57const TextareaContext = React.createContext<TextareaContextValue>({
58  hasRoot: false,
59  count: 0,
60  size: 'default',
61  registerTextarea: () => {},
62});
63 
64interface TextareaRootProps extends React.ComponentProps<'div'> {
65  maxCharacters?: number;
66  size?: 'sm' | 'default' | 'lg';
67}
68 
69function TextareaRoot({
70  className,
71  children,
72  maxCharacters,
73  size,
74  ...props
75}: TextareaRootProps) {
76  const [count, setCount] = React.useState(0);
77  const textareaRef = React.useRef<HTMLTextAreaElement | null>(null);
78 
79  // Extract form-related props that should be passed to the textarea, strip from div.
80  const formProps: TextareaContextValue['formProps'] = {
81    'aria-invalid': props['aria-invalid'],
82    'aria-describedby': props['aria-describedby'],
83    id: props.id,
84  };
85  const {
86    'aria-invalid': _a,
87    'aria-describedby': _b,
88    id: _id,
89// … truncated