65 lines
1.9 KiB
TypeScript
65 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 SelectOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
label?: string;
|
|
fullWidth?: boolean;
|
|
pl?: number;
|
|
errorMessage?: string;
|
|
variant?: 'default' | 'error';
|
|
options?: SelectOption[];
|
|
}
|
|
|
|
export const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
|
({ label, fullWidth = true, pl, errorMessage, variant = 'default', options, children, className = '', style, ...props }, ref) => {
|
|
const isError = variant === 'error' || !!errorMessage;
|
|
|
|
const variantClasses = isError
|
|
? 'border-warning-amber focus:border-warning-amber'
|
|
: 'border-charcoal-outline focus:border-primary-blue';
|
|
|
|
const defaultClasses = `${fullWidth ? 'w-full' : 'w-auto'} px-3 py-2 bg-deep-graphite border rounded-lg text-white focus:outline-none transition-colors`;
|
|
const classes = [
|
|
defaultClasses,
|
|
variantClasses,
|
|
pl ? `pl-${pl}` : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
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
|
|
as="select"
|
|
ref={ref}
|
|
className={classes}
|
|
style={style}
|
|
{...props}
|
|
>
|
|
{options ? options.map(opt => (
|
|
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
|
)) : children}
|
|
</Box>
|
|
{errorMessage && (
|
|
<Text size="xs" color="text-warning-amber" mt={1}>
|
|
{errorMessage}
|
|
</Text>
|
|
)}
|
|
</Stack>
|
|
);
|
|
}
|
|
);
|
|
|
|
Select.displayName = 'Select';
|