use svelte class directive for conditional classes

package-lock.json

@@ -29,6 +29,7 @@
 				"svelte": "^4.0.5",
 				"svelte-check": "^3.4.3",
 				"svelte-heros-v2": "^0.9.3",
+				"svelte-multicssclass": "^2.1.1",
 				"tailwindcss": "^3.3.3",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
@@ -4870,6 +4871,12 @@
 				"svelte": "^3.19.0 || ^4.0.0-next.0"
 			}
 		},
+		"node_modules/svelte-multicssclass": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmjs.org/svelte-multicssclass/-/svelte-multicssclass-2.1.1.tgz",
+			"integrity": "sha512-orKylsKQ4reqHQ87nmB4oCPGgut4V/ysT/cZHksOPEzxyBpuiLrP3NkDAn0wIDATrBld/UuDOtKz8L0P7SYl0Q==",
+			"dev": true
+		},
 		"node_modules/svelte-preprocess": {
 			"version": "5.0.4",
 			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.4.tgz",

package.json

@@ -28,6 +28,7 @@
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-heros-v2": "^0.9.3",
+		"svelte-multicssclass": "^2.1.1",
 		"tailwindcss": "^3.3.3",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",

src/lib/components/Input/Input.svelte

@@ -33,11 +33,9 @@
 			{/if}
 			<div class="flex items-center">
 				<input
-					class={type === 'checkbox'
-						? 'checkbox'
-						: `input input-bordered w-[100%] sm:max-w-[16rem] ${
-								initialType === 'password' ? 'pr-11' : ''
-						  }`}
+					class:checkbox={type === 'checkbox'}
+					class:input,input-bordered,w-[100%],sm:max-w-[16rem]={type !== 'checkbox'}
+					class:pr-11={initialType === 'password'}
 					{id}
 					{name}
 					{type}

vite.config.ts

@@ -1,8 +1,14 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
+import { multicssclass } from 'svelte-multicssclass';
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
+		multicssclass(),
+		sveltekit()
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{ts,js}']
 	}