chore: initial Untitled UI Vite scaffold with FontAwesome Pro

src/providers/router-provider.tsx

@@ -0,0 +1,16 @@
+import { type PropsWithChildren } from "react";
+import { RouterProvider } from "react-aria-components";
+import { useNavigate } from "react-router";
+import type { NavigateOptions } from "react-router";
+
+declare module "react-aria-components" {
+    interface RouterConfig {
+        routerOptions: NavigateOptions;
+    }
+}
+
+export const RouteProvider = ({ children }: PropsWithChildren) => {
+    const navigate = useNavigate();
+
+    return <RouterProvider navigate={navigate}>{children}</RouterProvider>;
+};

src/providers/theme-provider.tsx

@@ -0,0 +1,82 @@
+import type { ReactNode } from "react";
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "light" | "dark" | "system";
+
+interface ThemeContextType {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = (): ThemeContextType => {
+    const context = useContext(ThemeContext);
+
+    if (context === undefined) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+
+    return context;
+};
+
+interface ThemeProviderProps {
+    children: ReactNode;
+    /**
+     * The class to add to the root element when the theme is dark
+     * @default "dark-mode"
+     */
+    darkModeClass?: string;
+    /**
+     * The default theme to use if no theme is stored in localStorage
+     * @default "system"
+     */
+    defaultTheme?: Theme;
+    /**
+     * The key to use to store the theme in localStorage
+     * @default "ui-theme"
+     */
+    storageKey?: string;
+}
+
+export const ThemeProvider = ({ children, defaultTheme = "system", storageKey = "ui-theme", darkModeClass = "dark-mode" }: ThemeProviderProps) => {
+    const [theme, setTheme] = useState<Theme>(() => {
+        if (typeof window !== "undefined") {
+            const savedTheme = localStorage.getItem(storageKey) as Theme | null;
+            return savedTheme || defaultTheme;
+        }
+        return defaultTheme;
+    });
+
+    useEffect(() => {
+        const applyTheme = () => {
+            const root = window.document.documentElement;
+
+            if (theme === "system") {
+                const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+
+                root.classList.toggle(darkModeClass, systemTheme === "dark");
+                localStorage.removeItem(storageKey);
+            } else {
+                root.classList.toggle(darkModeClass, theme === "dark");
+                localStorage.setItem(storageKey, theme);
+            }
+        };
+
+        applyTheme();
+
+        // Listen for system theme changes
+        const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+        const handleChange = () => {
+            if (theme === "system") {
+                applyTheme();
+            }
+        };
+
+        mediaQuery.addEventListener("change", handleChange);
+        return () => mediaQuery.removeEventListener("change", handleChange);
+    }, [theme]);
+
+    return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
+};