feat(lint): switch to eslint config and formatting (use vscode for autoformat)

15 files changed, 147 insertions, 264 deletions

diff --git a/packages/assets/scripts/generate.mjs b/packages/assets/scripts/generate.mjs
index 44ba4e4..08fc2ba 100644
--- a/packages/assets/scripts/generate.mjs
+++ b/packages/assets/scripts/generate.mjs
@@ -1,48 +1,45 @@
 import fs from 'node:fs/promises';
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import prettier from 'prettier';
 
 const assetFolders = ['icons', 'images', 'svgs/brands', 'svgs/ext/Extras', 'svgs/ext/Code'];
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-prettier.resolveConfig(join(__dirname, '..', '..', '..', '.prettierrc.js')).then((options) =>
-	Promise.all(
-		assetFolders.map(async (folder) => {
-			const indexFilePath = join(__dirname, '..', folder, 'index.ts');
-			const assetsFolderPath = join(__dirname, '..', folder);
-
-			if (
-				await fs.access(indexFilePath).then(
-					() => true,
-					() => false
-				)
-			) {
-				await fs.unlink(indexFilePath);
-			}
-
-			const fileNames = await fs.readdir(assetsFolderPath);
-
-			const assetImports = fileNames
-				.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
-				.map((fileName) => {
-					const variableName = fileName.split('.')[0].replace(/-/g, '');
-					if (folder.startsWith('svgs')) {
-						return `import { ReactComponent as ${variableName} } from './${fileName}';`;
-					}
-					return `import ${variableName} from './${fileName}';`;
-				})
-				.join('\n');
-
-			const assetExports = fileNames
-				.filter((fileName) => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
-				.map((fileName) => `${fileName.split('.')[0].replace(/-/g, '')}`)
-				.join(',\n');
-
-			const indexFileContent = await prettier.format(
-				`
+await Promise.all(
+	assetFolders.map(async (folder) => {
+		const indexFilePath = join(__dirname, '..', folder, 'index.ts');
+		const assetsFolderPath = join(__dirname, '..', folder);
+
+		if (
+			await fs.access(indexFilePath).then(
+				() => true,
+				() => false,
+			)
+		)
+			await fs.unlink(indexFilePath);
+
+		const fileNames = await fs.readdir(assetsFolderPath);
+
+		const assetImports = fileNames
+			.filter(fileName => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
+			.map((fileName) => {
+				const variableName = fileName.split('.')[0].replace(/-/g, '');
+				if (folder.startsWith('svgs'))
+					return `import { ReactComponent as ${variableName} } from './${fileName}';`;
+
+				return `import ${variableName} from './${fileName}';`;
+			})
+			.join('\n');
+
+		const assetExports = fileNames
+			.filter(fileName => fileName !== 'index.ts' && !/(^|\/)\.[^\/\.]/g.test(fileName))
+			.map(fileName => `${fileName.split('.')[0].replace(/-/g, '')}`)
+			.join(',\n');
+
+		const indexFileContent
+			= `
 				/*
 				 * This file was automatically generated by a script.
 				 * To regenerate this file, run: pnpm assets gen
@@ -52,11 +49,9 @@ prettier.resolveConfig(join(__dirname, '..', '..', '..', '.prettierrc.js')).then
 
 				export {
 					${assetExports}
-				};`,
-				{ ...options, parser: 'typescript' }
-			);
+				};`
+			;
 
-			await fs.writeFile(indexFilePath, indexFileContent);
-		})
-	)
+		await fs.writeFile(indexFilePath, indexFileContent);
+	}),
 );
diff --git a/packages/config/.eslintrc.js b/packages/config/.eslintrc.js
deleted file mode 100644
index 93a0c63..0000000
--- a/packages/config/.eslintrc.js
+++ /dev/null
@@ -1,4 +0,0 @@
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: [require.resolve('./eslint/base.js'), require.resolve('./eslint/tailwind.js')]
-};
diff --git a/packages/config/eslint/base.js b/packages/config/eslint/base.js
deleted file mode 100644
index 200f17d..0000000
--- a/packages/config/eslint/base.js
+++ /dev/null
@@ -1,79 +0,0 @@
-const path = require('node:path');
-
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	parser: '@typescript-eslint/parser',
-	parserOptions: {
-		ecmaFeatures: {
-			jsx: true
-		},
-		ecmaVersion: 12,
-		sourceType: 'module'
-	},
-	extends: [
-		'eslint:recommended',
-		'plugin:react/recommended',
-		'plugin:react-hooks/recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:astro/recommended',
-		'plugin:astro/jsx-a11y-recommended',
-		'turbo',
-		'prettier'
-	],
-	plugins: ['react', 'jsx-a11y'],
-	rules: {
-		'react/display-name': 'off',
-		'react/prop-types': 'off',
-		'react/no-unescaped-entities': 'off',
-		'react/react-in-jsx-scope': 'off',
-		'react-hooks/rules-of-hooks': 'warn',
-		'react-hooks/exhaustive-deps': 'warn',
-		'@typescript-eslint/no-unused-vars': 'off',
-		'@typescript-eslint/ban-ts-comment': 'off',
-		'@typescript-eslint/no-explicit-any': 'off',
-		'@typescript-eslint/no-var-requires': 'off',
-		'@typescript-eslint/no-non-null-assertion': 'off',
-		'@typescript-eslint/explicit-module-boundary-types': 'off',
-		'@typescript-eslint/no-empty-interface': 'off',
-		'@typescript-eslint/no-empty-function': 'off',
-		'@typescript-eslint/ban-types': 'off',
-		'no-control-regex': 'off',
-		'no-mixed-spaces-and-tabs': ['warn', 'smart-tabs'],
-		'turbo/no-undeclared-env-vars': [
-			'error',
-			{
-				cwd: path.resolve(path.join(__dirname, '..', '..', '..'))
-			}
-		]
-	},
-	ignorePatterns: ['dist', '**/*.js', '**/*.json', 'node_modules'],
-	settings: {
-		react: {
-			version: 'detect'
-		}
-	},
-	overrides: [
-		{
-			files: ['*.astro'],
-			parser: 'astro-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser',
-				extraFileExtensions: ['.astro']
-			},
-			rules: {
-				'astro/no-set-html-directive': 2,
-				'indent': 'off'
-			}
-		},
-		{
-			files: ['*.ts', '*.d.ts', '*.tsx', '*.js', '*.jsx', '*.mjs', '*.cjs'],
-			parser: '@typescript-eslint/parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			},
-			rules: {
-				indent: 'off'
-			}
-		}
-	]
-};
diff --git a/packages/config/eslint/tailwind.js b/packages/config/eslint/tailwind.js
deleted file mode 100644
index 9ac36ae..0000000
--- a/packages/config/eslint/tailwind.js
+++ /dev/null
@@ -1,23 +0,0 @@
-const path = require('node:path');
-
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: ['plugin:tailwindcss/recommended'],
-	rules: {
-		'tailwindcss/no-custom-classname': 'off',
-		'tailwindcss/classnames-order': [
-			'warn',
-			{
-				config: path.resolve(
-					path.join(__dirname, '../../..', 'packages/ui/tailwind.config.js')
-				)
-			}
-		]
-	},
-	settings: {
-		tailwindcss: {
-			callees: ['classnames', 'clsx', 'ctl', 'cva', 'tw', 'twStyle'],
-			tags: ['tw', 'twStyle']
-		}
-	}
-};
diff --git a/packages/config/eslint/web.js b/packages/config/eslint/web.js
deleted file mode 100644
index dc010b3..0000000
--- a/packages/config/eslint/web.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: [require.resolve('./base.js'), require.resolve('./tailwind.js')],
-	ignorePatterns: ['public', 'vite.config.ts'],
-	env: {
-		browser: true,
-		node: true
-	},
-	rules: {
-		'no-restricted-syntax': [
-			'error',
-			{
-				selector: "CallExpression[callee.name='useParams']",
-				message: 'useParams is illegal, use useZodRouteParams!'
-			},
-			{
-				selector: "CallExpression[callee.name='useSearchParams']",
-				message: 'useSearchParams is illegal, use useZodSearchParams!'
-			}
-		]
-	}
-};
diff --git a/packages/config/index.js b/packages/config/index.js
index 524af3b..cf96492 100644
--- a/packages/config/index.js
+++ b/packages/config/index.js
@@ -1,3 +1 @@
-module.exports = {
-	vite: require('./vite')
-};
+export { default as vite } from './vite';
diff --git a/packages/config/package.json b/packages/config/package.json
index 5fdcbdc..dbdad1b 100644
--- a/packages/config/package.json
+++ b/packages/config/package.json
@@ -1,29 +1,17 @@
 {
 	"name": "@polyfrost/config",
+	"type": "module",
 	"version": "0.0.0",
 	"exports": {
 		"./*": "./*",
 		"./vite": "./vite",
 		"./vite/relAlias": "./vite/relAlias"
 	},
-	"scripts": {
-		"lint": "eslint . --cache"
-	},
 	"devDependencies": {
-		"@typescript-eslint/eslint-plugin": "^6.8.0",
-		"@typescript-eslint/parser": "^6.8.0",
-		"eslint": "^8.52.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-config-turbo": "^1.10.16",
-		"eslint-plugin-astro": "^0.29.1",
-		"eslint-plugin-jsx-a11y": "^6.7.1",
-		"eslint-plugin-prettier": "^5.0.1",
-		"eslint-plugin-react": "^7.33.2",
-		"eslint-plugin-react-hooks": "^4.6.0",
-		"eslint-plugin-tailwindcss": "^3.13.0",
-		"eslint-utils": "^3.0.0",
+		"@vitejs/plugin-react": "^4.2.0",
 		"regexpp": "^3.2.0",
 		"vite-plugin-html": "^3.2.0",
-		"vite-plugin-svgr": "^4.1.0"
+		"vite-plugin-svgr": "^4.2.0",
+		"vite-tsconfig-paths": "^4.2.1"
 	}
 }
diff --git a/packages/config/vite/index.ts b/packages/config/vite/index.ts
index a9306a6..f845f11 100644
--- a/packages/config/vite/index.ts
+++ b/packages/config/vite/index.ts
@@ -10,18 +10,18 @@ export default defineConfig({
 		react(),
 		svg({ svgrOptions: { icon: true } }),
 		createHtmlPlugin({
-			minify: true
-		})
+			minify: true,
+		}),
 	],
 	css: {
 		modules: {
-			localsConvention: 'camelCaseOnly'
-		}
+			localsConvention: 'camelCaseOnly',
+		},
 	},
 	root: 'src',
 	build: {
 		sourcemap: true,
 		outDir: '../dist',
-		assetsDir: '.'
-	}
+		assetsDir: '.',
+	},
 });
diff --git a/packages/config/vite/relAlias.ts b/packages/config/vite/relAlias.ts
index 1a502b5..7bafe74 100644
--- a/packages/config/vite/relAlias.ts
+++ b/packages/config/vite/relAlias.ts
@@ -1,10 +1,11 @@
-import fs from 'fs/promises';
-import path from 'path';
-import { Alias } from 'vite';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import type { Alias } from 'vite';
 
 const projectPath = path.resolve(__dirname, '../../../');
 const pkgJsonCache = new Map();
 
+// /src/ or \src\, depending on platform
 const SRC_DIR_PATH = `${path.sep}src${path.sep}`;
 
 const resolver: Alias = {
@@ -13,15 +14,18 @@ const resolver: Alias = {
 	async customResolver(source, importer) {
 		let root: null | string = null;
 
-		if (importer) importer = path.normalize(importer);
+		if (importer)
+			importer = path.normalize(importer);
 
+		// source is the path imported on typescript, which always use / as path separator
 		const [_, sourcePath] = source.split('~/');
 
 		const relativeImporter = importer?.replace(projectPath, '');
 		if (relativeImporter && relativeImporter.includes(SRC_DIR_PATH)) {
 			const [pkg] = relativeImporter.split(SRC_DIR_PATH);
 			root = path.join(projectPath, pkg, 'src');
-		} else if (importer) {
+		}
+		else if (importer) {
 			const pathObj = path.parse(importer);
 
 			let parent = pathObj.dir;
@@ -30,13 +34,15 @@ const resolver: Alias = {
 
 				let hasPkgJson = pkgJsonCache.get(parent);
 
-				if (hasPkgJson === undefined)
+				if (hasPkgJson === undefined) {
 					try {
 						await fs.stat(path.join(parent, 'package.json'));
 						pkgJsonCache.set(parent, (hasPkgJson = true));
-					} catch {
+					}
+					catch {
 						pkgJsonCache.set(parent, (hasPkgJson = false));
 					}
+				}
 
 				if (hasPkgJson) {
 					root = parent;
@@ -46,7 +52,8 @@ const resolver: Alias = {
 
 			if (root === null)
 				throw new Error(`Failed to resolve import path ${source} in file ${importer}`);
-		} else {
+		}
+		else {
 			throw new Error(`Failed to resolve import path ${source} in file ${importer}`);
 		}
 
@@ -54,7 +61,8 @@ const resolver: Alias = {
 
 		const folderItems = await fs.readdir(path.join(absolutePath, '..'));
 
-		const item = folderItems.find((i) => i.startsWith(sourcePath.split('/').at(-1)!))!;
+		// sourcePath is derived from the path imported on typescript, which always use / as path separator
+		const item = folderItems.find(i => i.startsWith(sourcePath.split('/').at(-1)!))!;
 
 		const fullPath = absolutePath + path.extname(item);
 
@@ -63,15 +71,16 @@ const resolver: Alias = {
 		if (stats.isDirectory()) {
 			const directoryItems = await fs.readdir(absolutePath + path.extname(item));
 
-			const indexFile = directoryItems.find((i) => i.startsWith('index'));
+			const indexFile = directoryItems.find(i => i.startsWith('index'));
 			if (!indexFile)
 				throw new Error(`Failed to resolve import path ${source} in file ${importer}`);
 
 			return path.join(absolutePath, indexFile);
-		} else {
+		}
+		else {
 			return fullPath;
 		}
-	}
+	},
 };
 
 export default resolver;
diff --git a/packages/ui/.eslintrc.js b/packages/ui/.eslintrc.js
deleted file mode 100644
index f80eaa9..0000000
--- a/packages/ui/.eslintrc.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/** @type {import('eslint').ESLint.ConfigData} */
-module.exports = {
-	extends: [require.resolve('@polyfrost/config/eslint/web.js')],
-	parserOptions: {
-		tsconfigRootDir: __dirname,
-		project: './tsconfig.json'
-	}
-};
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d843ba8..c2c95a0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,8 +1,6 @@
 {
 	"name": "@polyfrost/ui",
 	"version": "0.0.0",
-	"main": "src/index.ts",
-	"types": "src/index.ts",
 	"exports": {
 		".": "./src/index.ts",
 		"./src/forms": "./src/forms/index.ts",
@@ -12,8 +10,9 @@
 		"./style/style.scss": "./style/style.scss",
 		"./package.json": "./package.json"
 	},
+	"main": "src/index.ts",
+	"types": "src/index.ts",
 	"scripts": {
-		"lint": "eslint src --cache",
 		"typecheck": "tsc -b"
 	},
 	"dependencies": {
@@ -21,31 +20,31 @@
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@polyfrost/assets": "workspace:*",
 		"@react-spring/web": "^9.7.3",
-		"@tailwindcss/forms": "^0.5.6",
+		"@tailwindcss/forms": "^0.5.7",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.0.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.17.0",
-		"sonner": "^1.0.3",
+		"react-router-dom": "^6.20.0",
+		"sonner": "^1.2.3",
 		"tailwindcss-radix": "^2.8.0",
 		"ts-pattern": "^5.0.5",
-		"use-debounce": "^9.0.4",
+		"use-debounce": "^10.0.0",
 		"zod": "^3.22.4"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.23.2",
+		"@babel/core": "^7.23.3",
 		"@polyfrost/config": "workspace:*",
-		"@storybook/types": "^7.5.1",
+		"@storybook/types": "^7.5.3",
 		"@tailwindcss/typography": "^0.5.10",
-		"@types/node": "~18.17.19",
-		"@types/react": "^18.2.31",
-		"@types/react-dom": "^18.2.14",
+		"@types/node": "~20.10.0",
+		"@types/react": "^18.2.38",
+		"@types/react-dom": "^18.2.17",
 		"autoprefixer": "^10.4.16",
 		"postcss": "^8.4.31",
-		"sass": "^1.69.4",
-		"tailwindcss": "^3.3.3",
+		"sass": "^1.69.5",
+		"tailwindcss": "^3.3.5",
 		"tailwindcss-animate": "^1.0.7",
-		"typescript": "^5.2.2"
+		"typescript": "^5.3.2"
 	}
 }
diff --git a/packages/ui/postcss.config.js b/packages/ui/postcss.config.js
index 708cbaf..cc95735 100644
--- a/packages/ui/postcss.config.js
+++ b/packages/ui/postcss.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-	plugins: [require('tailwindcss'), require('autoprefixer')]
+	plugins: [require('tailwindcss'), require('autoprefixer')],
 };
diff --git a/packages/ui/src/keys.ts b/packages/ui/src/keys.ts
index 55940f9..bb8eaa4 100644
--- a/packages/ui/src/keys.ts
+++ b/packages/ui/src/keys.ts
@@ -1,3 +1,4 @@
+// https://www.w3.org/TR/uievents-key/#keys-modifier
 export enum ModifierKeys {
 	Alt = 'Alt',
 	Shift = 'Shift',
@@ -10,14 +11,30 @@ export enum ModifierKeys {
 	NumLock = 'NumLock',
 	ScrollLock = 'ScrollLock',
 	Symbol = 'Symbol',
-	SymbolLock = 'SymbolLock'
+	SymbolLock = 'SymbolLock',
+}
+
+export enum EditingKeys {
+	Backspace = 'Backspace',
+	Delete = 'Delete',
+}
+
+export enum UIKeys {
+	Escape = 'Escape',
+}
+
+export enum NavigationKeys {
+	ArrowUp = 'ArrowUp',
+	ArrowDown = 'ArrowDown',
+	ArrowLeft = 'ArrowLeft',
+	ArrowRight = 'ArrowRight',
 }
 
 export type OSforKeys = 'macOS' | 'Windows' | 'Other';
 
 export const modifierSymbols: Record<
-	ModifierKeys,
-	{ macOS?: string; Windows?: string; Other: string }
+	ModifierKeys | EditingKeys | UIKeys | NavigationKeys,
+	{ macOS?: string, Windows?: string, Other: string }
 > = {
 	Alt: { macOS: '⌥', Other: 'Alt' },
 	AltGraph: { macOS: '⌥', Other: 'Alt' },
@@ -30,10 +47,17 @@ export const modifierSymbols: Record<
 	ScrollLock: { macOS: '⤓', Other: 'ScrLk' },
 	Shift: { Other: 'Shift', macOS: '⇧' },
 	Symbol: { macOS: '⎄', Other: 'Sym' },
-	SymbolLock: { macOS: '⎄', Other: 'Sym' }
+	SymbolLock: { macOS: '⎄', Other: 'Sym' },
+	Escape: { macOS: '⎋', Other: 'Esc' },
+	Delete: { macOS: '⌦', Other: 'Del' },
+	Backspace: { macOS: '⌫', Other: '⟵' },
+	ArrowUp: { Other: '↑' },
+	ArrowDown: { Other: '↓' },
+	ArrowLeft: { Other: '←' },
+	ArrowRight: { Other: '→' },
 };
 
-export const keySymbols: Record<string, { macOS?: string; Windows?: string; Other: string }> = {
+export const keySymbols: Record<string, { macOS?: string, Windows?: string, Other: string }> = {
 	' ': { Other: '␣' },
 	'Tab': { macOS: '⇥', Other: '⭾' },
 	'Enter': { macOS: '↩', Other: '↵' },
@@ -52,5 +76,5 @@ export const keySymbols: Record<string, { macOS?: string; Windows?: string; Othe
 	'Shift': { macOS: '⇧', Other: 'Shift' },
 	'PrintScreen': { Other: 'PrtSc' },
 	'ScrollLock': { macOS: '⤓', Other: 'ScrLk' },
-	'Pause': { macOS: '⎉', Other: 'Pause' }
+	'Pause': { macOS: '⎉', Other: 'Pause' },
 };
diff --git a/packages/ui/src/utils.tsx b/packages/ui/src/utils.tsx
index 5ccb488..67782bb 100644
--- a/packages/ui/src/utils.tsx
+++ b/packages/ui/src/utils.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx';
 import React from 'react';
 
-const twFactory =
-	(element: any) =>
-	([newClassNames, ..._]: TemplateStringsArray) =>
+function twFactory(element: any) {
+	return ([newClassNames, ..._]: TemplateStringsArray) =>
 		React.forwardRef(({ className, ...props }: any, ref) =>
 			React.createElement(element, {
 				...props,
 				className: clsx(newClassNames, className),
-				ref
-			})
+				ref,
+			}),
 		);
+}
 
 type ClassnameFactory<T> = (s: TemplateStringsArray) => T;
 
@@ -19,10 +19,10 @@ type TailwindFactory = {
 		React.ForwardRefExoticComponent<JSX.IntrinsicElements[K]>
 	>;
 } & {
-	<T>(c: T): ClassnameFactory<T>;
+	<T>(c: T): ClassnameFactory<T>
 };
 
 export const tw = new Proxy((() => {}) as unknown as TailwindFactory, {
 	get: (_, property: string) => twFactory(property),
-	apply: (_, __, [el]: [React.ReactElement]) => twFactory(el)
+	apply: (_, __, [el]: [React.ReactElement]) => twFactory(el),
 });
diff --git a/packages/ui/style/tailwind.js b/packages/ui/style/tailwind.js
index fc05bd9..8ebf041 100644
--- a/packages/ui/style/tailwind.js
+++ b/packages/ui/style/tailwind.js
@@ -1,21 +1,24 @@
 const defaultTheme = require('tailwindcss/defaultTheme');
 
 /** @type {(varName: string) => string} */
-const alpha = (varName) => `hsla(var(${varName}), <alpha-value>)`;
+// eslint-disable-next-line unused-imports/no-unused-vars
+const alpha = varName => `hsla(var(${varName}), <alpha-value>)`;
 const contentExts = `{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,stories.tsx}`;
 
+// TODO: make this not CJS
+
 /**
  * @param {string} app
  * @param {import('tailwindcss').Config} options
- * @returns {import('tailwindcss').Config}
+ * @returns {import('tailwindcss').Config} the tailwind config
  */
 module.exports = (app, options) => {
 	/** @type {import('tailwindcss').Config} */
-	let config = {
+	const config = {
 		content: [
 			`../../apps/${app}/src/**/*.${contentExts}`,
 			`../../packages/*/src/**/*.${contentExts}`,
-			`../../interface/**/*.${contentExts}`
+			`../../interface/**/*.${contentExts}`,
 		],
 		darkMode: 'class',
 		theme: {
@@ -25,7 +28,7 @@ module.exports = (app, options) => {
 				md: '868px',
 				lg: '1024px',
 				xl: '1280px',
-				...defaultTheme.screens
+				...defaultTheme.screens,
 			},
 			fontSize: {
 				'xs': '12px',
@@ -37,7 +40,7 @@ module.exports = (app, options) => {
 				'header-lg': '32px',
 				'body-sm': '15px',
 				'body': '16px',
-				'body-lg': '17px'
+				'body-lg': '17px',
 			},
 			borderRadius: {
 				none: '0',
@@ -45,31 +48,31 @@ module.exports = (app, options) => {
 				md: '5px',
 				lg: '8px',
 				xl: '12px',
-				full: '100vw'
+				full: '100vw',
 			},
 			extend: {
 				colors: {
 					blue: {
-						500: 'rgba(31, 101, 214, 1)'
+						500: 'rgba(31, 101, 214, 1)',
 					},
 					gray: {
 						50: 'rgba(240, 242, 244, 1)',
 						400: 'rgba(138, 150, 168, 1)',
 						700: 'rgba(65, 74, 88, 1)',
-						800: 'rgba(42, 47, 55, 1)'
+						800: 'rgba(42, 47, 55, 1)',
 					},
 					white: {
 						DEFAULT: 'rgba(255, 255, 255, 1)',
 						secondary: 'rgba(238, 241, 254, 1)',
-						hover: 'rgba(231, 235, 252, 1)'
+						hover: 'rgba(231, 235, 252, 1)',
 					},
 					black: {
-						DEFAULT: 'rgba(0, 0, 0, 1)'
+						DEFAULT: 'rgba(0, 0, 0, 1)',
 					},
 					text: {
 						DEFAULT: 'rgba(2, 3, 7, 1)',
-						primary: 'rgba(2, 3, 7, 1)'
-					}
+						primary: 'rgba(2, 3, 7, 1)',
+					},
 				},
 				extend: {
 					transitionTimingFunction: {
@@ -100,20 +103,23 @@ module.exports = (app, options) => {
 						'in-out-circ': 'cubic-bezier(0.85, 0, 0.15, 1)',
 						'in-back': 'cubic-bezier(0.36, 0, 0.66, -0.56)',
 						'out-back': 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)'
-					}
-				}
-			}
+						'in-out-back': 'cubic-bezier(0.68, -0.6, 0.32, 1.6)',
+					},
+				},
+			},
 		},
 		plugins: [
 			require('@tailwindcss/forms'),
 			require('tailwindcss-animate'),
 			require('@headlessui/tailwindcss'),
-			require('tailwindcss-radix')()
-		]
+			require('tailwindcss-radix')(),
+		],
+
+		...options,
 	};
 
-	if (app === 'website') config.plugins.push(require('@tailwindcss/typography'));
+	if (app === 'website')
+		config.plugins.push(require('@tailwindcss/typography'));
 
 	return config;
 };