Classnames

package.json

@@ -13,7 +13,7 @@
 		"@tanstack/react-query": "5.100.6",
 		"@tanstack/react-router": "1.168.26",
 		"babel-plugin-react-compiler": "1.0.0",
-		"classnames": "2.5.1",
+		"clsx": "2.1.1",
 		"i18next": "26.0.8",
 		"i18next-fetch-backend": "7.0.0",
 		"react": "19.2.5",

src/components/form/form.tsx

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import clsx from "clsx";
 import style from "./form.module.scss";
 
 type FormProps = React.ComponentProps<"form"> & {
@@ -12,7 +12,7 @@ const Form = ({
 	...props
 }: FormProps) => {
 	return (
-		<form className={classNames([className])} {...props}>
+		<form className={clsx([className])} {...props}>
 			<fieldset
 				disabled={disabled}
 				className={style.disablerFieldset}

src/components/header/app-header.tsx

@@ -1,6 +1,6 @@
 import { Link, useNavigate } from "@tanstack/react-router";
 import Logo from "assets/icons/logo.svg?react";
-import classNames from "classnames";
+import clsx from "clsx";
 import { Button, Select } from "components/form";
 import { postApiAuthLogout } from "lib/heyapi";
 import { useLocale } from "lib/i18n";
@@ -38,9 +38,7 @@ const AppHeader = () => {
 
 	return (
 		<header>
-			<div
-				className={classNames([style.header, style.row])}
-			>
+			<div className={clsx([style.header, style.row])}>
 				<nav className={style.row}>
 					{links.map((link) => (
 						<Link

src/components/heading/heading.tsx

@@ -1,4 +1,4 @@
-import classNames from "classnames";
+import clsx from "clsx";
 import type { JSX } from "react";
 import style from "./heading.module.scss";
 
@@ -33,10 +33,7 @@ export const Heading = ({
 
 	return (
 		<El
-			className={classNames(
-				style[`size-${size}`],
-				className,
-			)}
+			className={clsx(style[`size-${size}`], className)}
 			{...props}
 		>
 			{children}

src/routes/_auth/login.tsx

@@ -3,7 +3,7 @@ import {
 	Link,
 	useNavigate,
 } from "@tanstack/react-router";
-import classNames from "classnames";
+import clsx from "clsx";
 import { ErrorText } from "components/error-text/error-text";
 import { Button, Form, Input } from "components/form";
 import { H1 } from "components/heading/heading";
@@ -95,15 +95,13 @@ function LoginPage() {
 					</label>
 					<Link
 						to="/forgot-password"
-						className={classNames([style.forgotPassword])}
+						className={clsx([style.forgotPassword])}
 					>
 						{m.login_forgot_password()}
 					</Link>
 				</div>
 				<ErrorText>{error?.message}</ErrorText>
-				<Button type="submit">
-					{m.login_submit()}
-				</Button>
+				<Button type="submit">{m.login_submit()}</Button>
 			</Form>
 		</>
 	);