60 lines
1.9 KiB
TypeScript
60 lines
1.9 KiB
TypeScript
import React, { forwardRef, ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Stack } from './primitives/Stack';
|
|
import { Text } from './Text';
|
|
|
|
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: string;
|
|
icon?: ReactNode;
|
|
errorMessage?: string;
|
|
variant?: 'default' | 'error';
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ label, icon, errorMessage, variant = 'default', className = '', ...props }, ref) => {
|
|
const isError = variant === 'error' || !!errorMessage;
|
|
|
|
const baseClasses = 'w-full px-4 py-2 bg-deep-graphite border rounded-lg text-white placeholder:text-gray-500 focus:outline-none transition-all duration-150 sm:text-sm';
|
|
const variantClasses = isError
|
|
? 'border-warning-amber focus:border-warning-amber focus:ring-1 focus:ring-warning-amber'
|
|
: 'border-charcoal-outline focus:border-primary-blue focus:ring-1 focus:ring-primary-blue';
|
|
|
|
const classes = `${baseClasses} ${variantClasses} ${icon ? 'pl-11' : ''} ${className}`;
|
|
|
|
return (
|
|
<Stack gap={1.5} fullWidth>
|
|
{label && (
|
|
<Text as="label" size="xs" weight="bold" color="text-gray-500" uppercase letterSpacing="wider">
|
|
{label}
|
|
</Text>
|
|
)}
|
|
<Box fullWidth position="relative">
|
|
{icon && (
|
|
<Box
|
|
position="absolute"
|
|
left={0}
|
|
top="50%"
|
|
translateY="-50%"
|
|
zIndex={10}
|
|
w="11"
|
|
display="flex"
|
|
center
|
|
color="text-gray-500"
|
|
>
|
|
{icon}
|
|
</Box>
|
|
)}
|
|
<input ref={ref} className={classes} {...props} />
|
|
{errorMessage && (
|
|
<Text size="xs" color="text-warning-amber" mt={1}>
|
|
{errorMessage}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
</Stack>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = 'Input';
|