shoc-frontend-new/src/components/ui/text-field.tsx

import type { TextFieldProps } from "@mui/material";
import { TextField as MuiTextField } from "@mui/material";

import { cn } from "@/lib/utils";

export type UiTextFieldProps = TextFieldProps;

const textFieldSx = {
  "& .MuiOutlinedInput-root": {
    height: 40,
    fontFamily: "var(--font-sans)",
    fontSize: "var(--text-base)",
  },
  "& .MuiInputBase-input": {
    fontFamily: "var(--font-sans)",
    fontSize: "var(--text-base)",
    color: "var(--foreground)",
    "&::placeholder": {
      color: "var(--placeholder-foreground)",
      opacity: 1,
    },
    "&::-webkit-input-placeholder": {
      color: "var(--placeholder-foreground)",
      opacity: 1,
    },
    "&::-moz-placeholder": {
      color: "var(--placeholder-foreground)",
      opacity: 1,
    },
  },
} as const;

export function TextField({
  className,
  fullWidth = true,
  hiddenLabel = true,
  size = "small",
  sx,
  ...props
}: UiTextFieldProps) {
  return (
    <MuiTextField
      fullWidth={fullWidth}
      hiddenLabel={hiddenLabel}
      size={size}
      sx={[textFieldSx, ...(Array.isArray(sx) ? sx : sx ? [sx] : [])]}
      className={cn(className)}
      {...props}
    />
  );
}