50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
label?: string;
|
|
errorMessage?: string;
|
|
variant?: 'default' | 'error';
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
({ label, errorMessage, variant = 'default', fullWidth = true, className = '', ...props }, ref) => {
|
|
const isError = variant === 'error' || !!errorMessage;
|
|
|
|
return (
|
|
<Stack gap={1.5} fullWidth={fullWidth}>
|
|
{label && (
|
|
<Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{label}
|
|
</Text>
|
|
)}
|
|
<Box position="relative" fullWidth={fullWidth}>
|
|
<Box
|
|
as="textarea"
|
|
ref={ref}
|
|
fullWidth={fullWidth}
|
|
p={3}
|
|
bg="bg-deep-graphite"
|
|
rounded="lg"
|
|
color="text-white"
|
|
border
|
|
borderColor={isError ? 'var(--warning-amber)' : 'rgba(38, 38, 38, 0.8)'}
|
|
className={`placeholder:text-gray-500 focus:ring-2 focus:ring-primary-blue transition-all duration-150 sm:text-sm ${className}`}
|
|
{...props}
|
|
/>
|
|
{errorMessage && (
|
|
<Text size="xs" color="text-warning-amber" mt={1}>
|
|
{errorMessage}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
);
|
|
|
|
TextArea.displayName = 'TextArea';
|