UIKit/lib/components/PenaTextField.tsx

import { FormControl, InputLabel, SxProps, TextField, TextFieldProps, Theme, useMediaQuery, useTheme } from "@mui/material";


interface Props {
    id?: string;
    label?: string;
    labelSx?: SxProps<Theme>;
    bold?: boolean;
    gap?: string;
    backgroundColor?: string;
    FormControlSx?: SxProps<Theme>;
    TextFieldSx?: SxProps<Theme>;
    placeholder?: TextFieldProps["placeholder"];
    value?: TextFieldProps["value"];
    helperText?: TextFieldProps["helperText"];
    error?: TextFieldProps["error"];
    type?: TextFieldProps["type"];
    onBlur?: TextFieldProps["onBlur"];
    onChange?: TextFieldProps["onChange"];
    fullWidth?: boolean;
}

export function PenaTextField({
    id = "pena-textfield",
    label,
    labelSx,
    bold = false,
    gap = "10px",
    onChange,
    error,
    helperText,
    onBlur,
    placeholder,
    type,
    value,
    backgroundColor,
    FormControlSx,
    TextFieldSx,
    fullWidth = true,
}: Props) {
    const theme = useTheme();
    const upMd = useMediaQuery(theme.breakpoints.up("md"));

    const labelFont = upMd
        ? bold
            ? theme.typography.p1
            : { ...theme.typography.body1, fontWeight: 500 }
        : theme.typography.body2;

    const placeholderFont = upMd ? undefined : { fontWeight: 400, fontSize: "16px", lineHeight: "19px" };

    return (
        <FormControl
            fullWidth={fullWidth}
            variant="standard"
            sx={{
                gap,
                ...FormControlSx,
            }}
        >
            {label && (
                <InputLabel
                    shrink
                    htmlFor={id}
                    sx={{
                        position: "inherit",
                        color: "black",
                        transform: "none",
                        ...labelFont,
                        ...labelSx,
                    }}
                >
                    {label}
                </InputLabel>
            )}
            <TextField
                fullWidth
                id={id}
                error={error}
                helperText={helperText}
                onBlur={onBlur}
                placeholder={placeholder}
                type={type}
                value={value}
                sx={{
                    "& .MuiInputBase-root": {
                        height: "48px",
                        borderRadius: "8px",
                        "& fieldset": {
                            border: `1px solid ${theme.palette.gray.main}`,
                        },
                        "&:hover fieldset": {
                            border: `1px solid ${theme.palette.gray.dark}`,
                        },
                        "&.Mui-focused fieldset": {
                            border: `2px solid ${theme.palette.purple.main}`,
                        },
                    },
                    "& .MuiFormHelperText-root.MuiFormHelperText-contained.MuiFormHelperText-filled.Mui-error": {
                        position: "absolute",
                        top: "45px",
                    },
                    ...TextFieldSx,
                }}
                inputProps={{
                    sx: {
                        boxSizing: "border-box",
                        backgroundColor: backgroundColor ?? theme.palette.background.default,
                        borderRadius: "8px",
                        height: "48px",
                        py: 0,
                        color: theme.palette.gray.dark,
                        ...placeholderFont,
                    },
                }}
                onChange={onChange}
            />
        </FormControl>
    );
}