From 3335877e4f74642215f0647f85f4414feeabdaba Mon Sep 17 00:00:00 2001
From: Jorn Luiten <publicJorn@users.noreply.github.com>
Date: Mon, 29 Jun 2026 12:11:13 +0200
Subject: [PATCH] replace classNames with clsx

---
 bun.lock                             | 4 ++--
 package.json                         | 2 +-
 src/components/form/form.tsx         | 4 ++--
 src/components/header/app-header.tsx | 6 ++----
 src/components/heading/heading.tsx   | 7 ++-----
 src/routes/_auth/login.tsx           | 8 +++-----
 6 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/bun.lock b/bun.lock
index 03cea81..84a8aae 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,7 +10,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",
@@ -400,7 +400,7 @@
 
     "chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
 
-    "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "color-support": ["color-support@1.1.3", "", { "bin": { "color-support": "bin.js" } }, "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg=="],
 
diff --git a/package.json b/package.json
index 906b20f..b622958 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/form/form.tsx b/src/components/form/form.tsx
index 9f38982..d638996 100644
--- a/src/components/form/form.tsx
+++ b/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}
diff --git a/src/components/header/app-header.tsx b/src/components/header/app-header.tsx
index aad9bde..694c2a7 100644
--- a/src/components/header/app-header.tsx
+++ b/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
diff --git a/src/components/heading/heading.tsx b/src/components/heading/heading.tsx
index 8fdd969..962f0fa 100644
--- a/src/components/heading/heading.tsx
+++ b/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}
diff --git a/src/routes/_auth/login.tsx b/src/routes/_auth/login.tsx
index 18ab173..a589da8 100644
--- a/src/routes/_auth/login.tsx
+++ b/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>
 		</>
 	);