74 lines
2.6 KiB
TypeScript
74 lines
2.6 KiB
TypeScript
import * as React from 'react';
|
|
import { clsx } from 'clsx';
|
|
|
|
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
label?: string;
|
|
error?: string;
|
|
hint?: string;
|
|
controlSize?: 'sm' | 'md' | 'lg';
|
|
variant?: 'surface' | 'muted' | 'ghost';
|
|
}
|
|
|
|
export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
(
|
|
{ label, error, hint, controlSize = 'md', variant = 'surface', className, id, ...props },
|
|
ref
|
|
) => {
|
|
const generatedId = React.useId();
|
|
const textareaId = id ?? (label || error || hint ? `textarea-${generatedId}` : undefined);
|
|
const sizes: Record<NonNullable<TextareaProps['controlSize']>, string> = {
|
|
sm: 'min-h-20 px-2.5 py-2 text-xs',
|
|
md: 'min-h-24 px-3 py-2 text-sm',
|
|
lg: 'min-h-32 px-4 py-3 text-base',
|
|
};
|
|
const variants: Record<NonNullable<TextareaProps['variant']>, string> = {
|
|
surface: 'bg-[var(--bl-surface-card,#1a1a2e)]',
|
|
muted: 'bg-[var(--bl-surface-muted,#252540)]',
|
|
ghost: 'bg-transparent',
|
|
};
|
|
|
|
return (
|
|
<div className="grid gap-1.5">
|
|
{label && (
|
|
<label
|
|
htmlFor={textareaId}
|
|
className="block text-xs font-semibold uppercase tracking-[0.08em] text-[var(--bl-text-secondary,#a0a0b0)]"
|
|
>
|
|
{label}
|
|
</label>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
id={textareaId}
|
|
className={clsx(
|
|
'w-full resize-y rounded-lg border shadow-sm shadow-black/[0.03] outline-none transition duration-150',
|
|
variants[variant],
|
|
sizes[controlSize],
|
|
'text-[var(--bl-text-primary,#fff)]',
|
|
'placeholder:text-[var(--bl-text-tertiary,#555)]',
|
|
'disabled:cursor-not-allowed disabled:opacity-60',
|
|
'focus:border-[var(--bl-focus-ring,var(--bl-accent,#5A8CFF))] focus:ring-2 focus:ring-[var(--bl-focus-ring-muted,var(--bl-accent-muted,rgba(90,140,255,0.2)))] focus:ring-offset-0',
|
|
error ? 'border-[var(--bl-danger)]' : 'border-[var(--bl-border,#2a2a4a)]',
|
|
className
|
|
)}
|
|
aria-invalid={error ? 'true' : undefined}
|
|
aria-describedby={error ? `${textareaId}-error` : hint ? `${textareaId}-hint` : undefined}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p id={`${textareaId}-error`} className="text-xs text-[var(--bl-danger)]" role="alert">
|
|
{error}
|
|
</p>
|
|
)}
|
|
{hint && !error && (
|
|
<p id={`${textareaId}-hint`} className="text-xs text-[var(--bl-text-tertiary,#555)]">
|
|
{hint}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Textarea.displayName = 'Textarea';
|