MicroClub Textarea

1'use client';
2 
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7export interface McTextareaProps extends React.ComponentProps<'textarea'> {
8  /** Label rendered above the textarea. */
9  label?: React.ReactNode;
10  /** Help text below the textarea. Replaced by error when present. */
11  description?: React.ReactNode;
12  /** Truthy = error state. ReactNode = renders the message. `true` = red border only. */
13  error?: React.ReactNode;
14  /** Block-start addon (toolbar, controls above the textarea). */
15  addonTop?: React.ReactNode;
16  /** Block-end addon (character count, action buttons below the textarea). */
17  addonBottom?: React.ReactNode;
18}
19 
20function McTextarea({
21  className,
22  label,
23  description,
24  error,
25  addonTop,
26  addonBottom,
27  id,
28  disabled,
29  required,
30  rows = 3,
31  ...props
32}: McTextareaProps) {
33  const generatedId = React.useId();
34  const textareaId = id ?? generatedId;
35 
36  const hasError = !!error;
37  const errorMessage = typeof error === 'boolean' ? null : error;
38  const showError = hasError && !!errorMessage;
39  const showDescription = !hasError && !!description;
40  const messageId = showError
41    ? `${textareaId}-error`
42    : showDescription
43      ? `${textareaId}-description`
44      : undefined;
45 
46  const handleGroupClick = (e: React.MouseEvent<HTMLDivElement>) => {
47    const target = e.target as HTMLElement;
48    if (!target.closest('button, a, input, select, textarea, [tabindex]')) {
49      e.currentTarget.querySelector<HTMLTextAreaElement>('[data-slot="textarea"]')?.focus();
50    }
51  };
52 
53  return (
54    <div data-slot="textarea-root" className={cn('flex flex-col gap-1.5', className)}>
55      {label && (
56        <label
57          data-slot="textarea-label"
58          htmlFor={textareaId}
59          className="text-sm font-medium text-muted-foreground"
60        >
61          {label}
62        </label>
63      )}
64 
65      <div
66        data-slot="textarea-group"
67        data-error={hasError || undefined}
68        data-disabled={disabled || undefined}
69        role="group"
70        onClick={handleGroupClick}
71        className={cn(
72          // Structure
73          'group/textarea flex min-w-0 cursor-text flex-col rounded-lg border border-border bg-input shadow-xs transition-all',
74          // Focus ring
75          'focus-within:ring-4 focus-within:ring-ring',
76          // Error
77          'data-error:border-destructive',
78          'data-error:focus-within:border-destructive data-error:focus-within:ring-destructive/20',
79// … truncated