Upgrade dependencies

package.json

@@ -12,27 +12,28 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@headlessui/react": "^2.1.8",
-    "@huggingface/transformers": "^3.0.0-alpha.19",
-    "axios": "^1.7.7",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "@headlessui/react": "^2.2.0",
+    "@huggingface/transformers": "^3.3.3",
+    "axios": "^1.8.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@eslint/js": "^9.9.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@eslint/js": "^9.22.0",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@tailwindcss/vite": "^4.0.12",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.9.0",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.9",
-    "globals": "^15.9.0",
-    "postcss": "^8.4.47",
-    "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.13",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.0.1",
-    "vite": "^5.4.1"
+    "eslint": "^9.22.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "postcss": "^8.5.3",
+    "prettier": "^3.5.3",
+    "tailwindcss": "^4.0.12",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.0",
+    "vite": "^6.2.1"
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 export default {
   plugins: {
-    tailwindcss: {},
     autoprefixer: {},
   },
 }

src/components/AudioManager.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, JSX } from "react";
 import axios from "axios";
 import Modal from "./modal/Modal";
 import { UrlInput } from "./modal/UrlInput";
@@ -687,11 +687,11 @@ function Tile(props: {
     return (
         <button
             onClick={props.onClick}
-            className='flex items-center justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200'
+            className='flex items-center justify-center rounded-lg p-2 bg-blue text-slate-500 hover:text-indigo-600 hover:bg-indigo-50 transition-all duration-200 mr-0'
         >
             <div className='w-7 h-7'>{props.icon}</div>
             {props.text && (
-                <div className='ml-2 break-text text-center text-md w-30'>
+                <div className='ml-2 break-text text-center text-md mw-30'>
                     {props.text}
                 </div>
             )}

src/components/TranscribeButton.tsx

@@ -3,7 +3,7 @@ interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     isTranscribing: boolean;
 }
 
-export function TranscribeButton(props: Props): JSX.Element {
+export function TranscribeButton(props: Props): React.JSX.Element {
     const { isModelLoading, isTranscribing, onClick, ...buttonProps } = props;
     return (
         <button
@@ -27,7 +27,7 @@ export function TranscribeButton(props: Props): JSX.Element {
     );
 }
 
-export function Spinner(props: { text: string }): JSX.Element {
+export function Spinner(props: { text: string }): React.JSX.Element {
     return (
         <div role='status'>
             <svg

src/components/modal/Modal.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { Fragment } from "react";
+import { Fragment, JSX } from "react";
 
 export interface Props {
     show: boolean;

src/css/index.css

@@ -1,6 +1,4 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss";
 
 html,
 body,

tsconfig.app.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/App.tsx","./src/index.tsx","./src/vite-env.d.ts","./src/components/AudioManager.tsx","./src/components/AudioPlayer.tsx","./src/components/AudioRecorder.tsx","./src/components/Progress.tsx","./src/components/TranscribeButton.tsx","./src/components/Transcript.tsx","./src/components/modal/Modal.tsx","./src/components/modal/UrlInput.tsx","./src/hooks/useTranscriber.ts","./src/hooks/useWorker.ts","./src/utils/AudioUtils.ts","./src/utils/BlobFix.ts","./src/utils/Constants.ts"],"errors":true,"version":"5.6.2"}
+{"root":["./src/app.tsx","./src/index.tsx","./src/vite-env.d.ts","./src/components/audiomanager.tsx","./src/components/audioplayer.tsx","./src/components/audiorecorder.tsx","./src/components/progress.tsx","./src/components/transcribebutton.tsx","./src/components/transcript.tsx","./src/components/modal/modal.tsx","./src/components/modal/urlinput.tsx","./src/hooks/usetranscriber.ts","./src/hooks/useworker.ts","./src/utils/audioutils.ts","./src/utils/blobfix.ts","./src/utils/constants.ts"],"version":"5.7.3"}

tsconfig.node.tsbuildinfo

@@ -1 +1 @@
-{"root":["./vite.config.ts"],"version":"5.6.2"}
+{"root":["./vite.config.ts"],"version":"5.7.3"}

vite.config.ts

@@ -1,7 +1,11 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+});