81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import React, { forwardRef, InputHTMLAttributes } from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
label?: string;
|
|
error?: string;
|
|
hint?: string;
|
|
fullWidth?: boolean;
|
|
size?: 'sm' | 'md' | 'lg';
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export const Input = forwardRef<HTMLInputElement, InputProps>(({
|
|
label,
|
|
error,
|
|
hint,
|
|
fullWidth = false,
|
|
size = 'md',
|
|
icon,
|
|
...props
|
|
}, ref) => {
|
|
const sizeClasses = {
|
|
sm: 'px-3 py-1.5 text-xs',
|
|
md: 'px-4 py-2 text-sm',
|
|
lg: 'px-4 py-3 text-base'
|
|
};
|
|
|
|
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';
|
|
const errorClasses = error ? 'border-[var(--ui-color-intent-critical)]' : '';
|
|
const widthClasses = fullWidth ? 'w-full' : '';
|
|
|
|
const classes = [
|
|
baseClasses,
|
|
sizeClasses[size],
|
|
errorClasses,
|
|
widthClasses,
|
|
icon ? 'pl-10' : '',
|
|
].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>
|
|
)}
|
|
<Box position="relative">
|
|
{icon && (
|
|
<Box position="absolute" left={3} top="50%" style={{ transform: 'translateY(-50%)' }}>
|
|
{icon}
|
|
</Box>
|
|
)}
|
|
<input
|
|
ref={ref}
|
|
className={classes}
|
|
{...props}
|
|
/>
|
|
</Box>
|
|
{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>
|
|
);
|
|
});
|
|
|
|
Input.displayName = 'Input';
|