Replace tailwindcss-animate by tw-animate-css, fix types

Author: WarningImHack3r

package.json

@@ -55,8 +55,8 @@
 		"tailwind-merge": "^3.0.2",
 		"tailwind-variants": "^1.0.0",
 		"tailwindcss": "^4.0.14",
-		"tailwindcss-animate": "^1.0.7",
 		"tslib": "^2.8.1",
+		"tw-animate-css": "^1.2.3",
 		"typescript": "^5.8.2",
 		"typescript-eslint": "^8.26.1",
 		"vite": "^6.2.2",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 @import "tailwindcss" theme(static);
 @plugin "@tailwindcss/typography";
-@plugin "tailwindcss-animate";
+@import "tw-animate-css";
 
 @variant dark (&:is(.dark *));
 
@@ -52,28 +52,8 @@
 	--radius-md: calc(var(--radius) - 2px);
 	--radius-sm: calc(var(--radius) - 4px);
 
-	--animate-accordion-down: accordion-down 0.2s ease-out;
-	--animate-accordion-up: accordion-up 0.2s ease-out;
 	--animate-caret-blink: caret-blink 1.25s ease-out infinite;
 
-	@keyframes accordion-down {
-		from {
-			height: 0;
-		}
-		to {
-			height: var(--bits-accordion-content-height);
-		}
-	}
-
-	@keyframes accordion-up {
-		from {
-			height: var(--bits-accordion-content-height);
-		}
-		to {
-			height: 0;
-		}
-	}
-
 	@keyframes caret-blink {
 		0%,
 		70%,

src/app.css

@@ -1,12 +1,20 @@
 <script lang="ts">
 	import "../app.css";
-	import { onMount, type SvelteComponent } from "svelte";
-	import type { SvelteHTMLElements } from "svelte/elements";
+	import { onMount } from "svelte";
 	import { fade } from "svelte/transition";
 	import { dev } from "$app/environment";
 	import { env } from "$env/dynamic/public";
 	import { page } from "$app/state";
-	import { ChevronDown, LoaderCircle, LogOut, Monitor, Moon, Sun, X } from "@lucide/svelte";
+	import {
+		ChevronDown,
+		type Icon,
+		LoaderCircle,
+		LogOut,
+		Monitor,
+		Moon,
+		Sun,
+		X
+	} from "@lucide/svelte";
 	import { ModeWatcher, resetMode, setMode } from "mode-watcher";
 	import { Octokit } from "octokit";
 	import { persisted } from "svelte-persisted-store";
@@ -83,7 +91,7 @@
 	type Theme = {
 		value: typeof theme;
 		label: string;
-		icon: typeof SvelteComponent<SvelteHTMLElements["svg"]>;
+		icon: typeof Icon;
 	};
 	const themes: Theme[] = [
 		{