Function Root

components/textarea.tsx:90–147

({
  error = false,
  disabled = false,
  readOnly = false,
  ref,
  maxLength,
  className,
  containerClassName,
  label,
  helperText,
  ...rest
}: Omit<TextareaProps, 'avatar'> & { ref: ForwardedRef<HTMLTextAreaElement> })

}

const Root = ({
  error = false,
  disabled = false,
  readOnly = false,
  ref,
  maxLength,
  className,
  containerClassName,
  label,
  helperText,
  ...rest
}: Omit<TextareaProps, 'avatar'> & { ref: ForwardedRef<HTMLTextAreaElement> }) => {
  const inputId = useId();
  const helperTextId = useId();
  const [currentLength, setCurrentLength] = useState(0);

  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
    setCurrentLength(event.target.value.length);
    rest.onChange?.(event);
  };

  return (
    <div className={clsxMerge(textareaContainerVariants({ error, disabled }), containerClassName)}>
      {label && (
        <Label htmlFor={rest.id ?? inputId} size='small' className={clsxMerge(textareaLabelVariants({ disabled }))}>
          {label}
        </Label>
      )}
      <textarea
        ref={ref}
        className={clsxMerge(textareaVariants({ error }), className)}
        disabled={disabled}
        aria-disabled={disabled}
        readOnly={readOnly}
        maxLength={maxLength}
        onChange={handleChange}
        id={rest.id ?? inputId}
        aria-describedby={helperText ? helperTextId : undefined}
        {...rest}
      />
      <p className='flex w-full items-center justify-between text-xs'>
        {helperText && (
          <span id={helperTextId} className={clsxMerge('font-medium', textareaHelperTextVariants({ error }))}>
            {helperText}
          </span>
        )}
        {maxLength !== undefined && maxLength >= 0 ? (
          <span
            id={`${rest.id ?? inputId}-character-count`}
            className={clsxMerge(textareaHelperTextVariants({ error }))}
          >
            {currentLength}/{maxLength}
          </span>
        ) : null}
      </p>
    </div>
  );
};