62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import { forwardRef, TextareaHTMLAttributes } from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
export interface TextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
label?: string;
|
|
error?: string;
|
|
hint?: string;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({
|
|
label,
|
|
error,
|
|
hint,
|
|
fullWidth = false,
|
|
...props
|
|
}, ref) => {
|
|
const baseClasses = 'bg-[var(--ui-color-bg-surface)] border border-[var(--ui-color-border-default)] text-[var(--ui-color-text-high)] placeholder-[var(--ui-color-text-low)] focus:outline-none focus:border-[var(--ui-color-intent-primary)] transition-colors p-3 text-sm min-h-[100px]';
|
|
const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
|
|
const widthClasses = fullWidth ? 'w-full' : '';
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
errorClasses,
|
|
widthClasses,
|
|
].filter(Boolean).join(' ');
|
|
|
|
return (
|
|
<Box width={fullWidth ? '100%' : undefined}>
|
|
{label && (
|
|
<Box marginBottom={1.5}>
|
|
<Text as="label" size="xs" weight="bold" variant="low">
|
|
{label}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
className={classes}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="critical">
|
|
{error}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
{hint && !error && (
|
|
<Box marginTop={1}>
|
|
<Text size="xs" variant="low">
|
|
{hint}
|
|
</Text>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
TextArea.displayName = 'TextArea';
|