Update dependencies

lib/component/input/radio/RadioButton.tsx

@@ -1,20 +1,24 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import { Radio } from "@headlessui/react";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function RadioButton({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	labelClassName,
 	size = "sm",
 	value,
 	disabled,
 	children
-}: Readonly<RadioButtonProps>){
+}: Readonly<RadioButtonProps>) {
+	const reactId = useId();
+	const effectiveId = id ?? reactId;
+
 	return (
 		<Radio
-			id={id}
+			id={effectiveId}
 			value={value}
 			className={clsx(
 				"group",
@@ -26,7 +30,7 @@ export default function RadioButton({
 				}
 			)}
 			disabled={disabled}
-			aria-labelledby={`${id}Label`}
+			aria-labelledby={`${effectiveId}Label`}
 		>
 			<div
 				className={clsx(
@@ -45,7 +49,7 @@ export default function RadioButton({
 			{
 				children &&
 				<span
-					id={`${id}Label`}
+					id={`${effectiveId}Label`}
 					className={labelClassName}
 				>
 					{children}

lib/component/tab/MattrixwvTabGroup.tsx

@@ -20,8 +20,8 @@ export default function MattrixwvTabGroup({
 		>
 			<MattrixwvTabList>
 				{
-					tabs.map((tab, index) => (
-						<MattrixwvTab key={index}>
+					tabs.map(tab => (
+						<MattrixwvTab key={tab.id}>
 							{tab.tab}
 						</MattrixwvTab>
 					))
@@ -29,8 +29,8 @@ export default function MattrixwvTabGroup({
 			</MattrixwvTabList>
 			<MattrixwvTabPanels>
 				{
-					tabs.map((tab, index) => (
-						<MattrixwvTabPanel key={index}>
+					tabs.map(tab => (
+						<MattrixwvTabPanel key={tab.id}>
 							{tab.content}
 						</MattrixwvTabPanel>
 					))

lib/component/toaster/Toaster.tsx

@@ -6,9 +6,11 @@ import clsx from "clsx";
 export default function Toaster({
 	toast,
 	className
-}: Readonly<ToasterProps>){
+}: Readonly<ToasterProps>) {
+	//TODO: Rework how your toasters work
 	return (
 		<Transition
+			// eslint-disable-next-line @eslint-react/purity
 			show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}
 			enter="transform transition duration-500"
 			enterFrom="-translate-y-[25vh]"

lib/provider/axios/AxiosProvider.tsx

@@ -1,6 +1,6 @@
 import type { AxiosError, AxiosInstance } from "axios";
 import axios from "axios";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, use, useMemo } from "react";
 import { useToken } from "../token";
 
 
@@ -46,8 +46,9 @@ export default function AxiosProvider({
 				}
 				return config;
 			}
-			catch(error){
-				return Promise.reject(error as Error);
+			catch (e) {
+				const error = e as Error;
+				return Promise.reject(error);
 			}
 		});
 		api.interceptors.response.use(r => r, async (error: AxiosError) => {
@@ -62,8 +63,9 @@ export default function AxiosProvider({
 					original.headers.Authorization = `Bearer ${newToken}`;
 					return api(original);
 				}
-				catch(refreshError){
-					return Promise.reject(refreshError as Error);
+				catch (e) {
+					const refreshError = e as Error;
+					return Promise.reject(refreshError);
 				}
 			}
 		});
@@ -76,16 +78,16 @@ export default function AxiosProvider({
 	}), [authorizedApi, publicApi]);
 
 	return (
-		<AxiosContext.Provider value={value}>
+		<AxiosContext value={value}>
 			{children}
-		</AxiosContext.Provider>
+		</AxiosContext>
 	);
 }
 
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useAxios(){
-	const context = useContext(AxiosContext);
+	const context = use(AxiosContext);
 
 	if(!context){
 		throw new Error("useAxios must be called inside an AxiosProvider");

lib/provider/theme/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import type { Theme, ThemeProviderProps, ThemeProviderState } from "$/types/ThemeTypes";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { createContext, use, useEffect, useMemo, useState } from "react";
 
 
 const themeInitialState: ThemeProviderState = {
@@ -17,7 +17,7 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
 		storageKey = "mattrixwv-ui-theme"
 	} = props;
 
-	const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme);
+	const [ theme, setTheme ] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
 
 	useEffect(() => {
 		const root = globalThis.document.documentElement;
@@ -43,16 +43,16 @@ export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
 	}), [storageKey, theme]);
 
 	return (
-		<ThemeProviderContext.Provider value={value}>
+		<ThemeProviderContext value={value}>
 			{children}
-		</ThemeProviderContext.Provider>
+		</ThemeProviderContext>
 	);
 }
 
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useTheme(){
-	const context = useContext(ThemeProviderContext);
+	const context = use(ThemeProviderContext);
 
 	if(!context){
 		throw new Error("useTheme must be used within a ThemeProvider");

lib/provider/toaster/ToasterProvider.tsx

@@ -1,7 +1,7 @@
 import { DangerMessageBlock, SuccessMessageBlock, WarningMessageBlock } from "$/component/message";
 import Toaster from "$/component/toaster/Toaster";
 import type { Toast, ToastProviderProps, ToastProviderState } from "$/types/ToasterTypes";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { createContext, use, useCallback, useMemo, useState } from "react";
 
 
 const toastInitialState: ToastProviderState = {
@@ -72,20 +72,20 @@ export default function ToasterProvider({
 	}), [ toast, hideToast, addToast, addSuccess, addWarning, addDanger ]);
 
 	return (
-		<ToasterProviderContext.Provider value={value}>
+		<ToasterProviderContext value={value}>
 			<Toaster
 				toast={toast}
 				className={className}
 			/>
 			{children}
-		</ToasterProviderContext.Provider>
+		</ToasterProviderContext>
 	);
 }
 
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useToaster(){
-	const context = useContext(ToasterProviderContext);
+	const context = use(ToasterProviderContext);
 
 	if(!context){
 		throw new Error("useToaster must be used within a ToasterProvider");

lib/provider/token/TokenProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useMemo, useRef } from "react";
+import { createContext, use, useCallback, useMemo, useRef } from "react";
 import { defaultTokenData, fetchToken, parseToken, type TokenData } from "./TokenUtils";
 
 export interface TokenState {
@@ -20,11 +20,11 @@ export default function TokenProvider({
 	children: React.ReactNode;
 }>){
 	const tokenRef = useRef<TokenData>(defaultTokenData);
-	const refreshPromise = useRef<Promise<string | null | undefined>>(null);
+	const refreshPromiseRef = useRef<Promise<string | null | undefined>>(null);
 
 	const getToken = useCallback(async () => {
-		if(refreshPromise.current){
-			return refreshPromise.current;
+		if(refreshPromiseRef.current){
+			return refreshPromiseRef.current;
 		}
 
 		const { accessToken, expires } = tokenRef.current;
@@ -32,7 +32,7 @@ export default function TokenProvider({
 		const isExpired = Date.now() > (expires - 5000);	//Give a 5 second buffer
 
 		if(!accessToken || isExpired){
-			refreshPromise.current = (async () => {
+			refreshPromiseRef.current = (async () => {
 				try {
 					const rawToken = (await fetchToken(apiUrl)).token;
 					const parsedToken = parseToken(rawToken);
@@ -44,10 +44,10 @@ export default function TokenProvider({
 					throw error;
 				}
 				finally {
-					refreshPromise.current = null;
+					refreshPromiseRef.current = null;
 				}
 			})();
-			return refreshPromise.current;
+			return refreshPromiseRef.current;
 		}
 
 		return accessToken;
@@ -58,16 +58,16 @@ export default function TokenProvider({
 	}), [getToken]);
 
 	return (
-		<TokenContext.Provider value={value}>
+		<TokenContext value={value}>
 			{children}
-		</TokenContext.Provider>
+		</TokenContext>
 	);
 }
 
 
 // eslint-disable-next-line react-refresh/only-export-components
 export function useToken(){
-	const context = useContext(TokenContext);
+	const context = use(TokenContext);
 
 	if(!context){
 		throw new Error("useToken must be called inside a TokenProvider");

lib/types/TabTypes.ts

@@ -1,4 +1,5 @@
 export interface TabGroupContent {
+	id: string;
 	tab: React.ReactNode;
 	content: React.ReactNode;
 }

lib/util/AccessibilityUtil.ts

@@ -6,7 +6,7 @@ export function usePrefersReducedMotion(){
 
 	useEffect(() => {
 		const media = globalThis.matchMedia("(prefers-reduced-motion: reduce)");
-		// eslint-disable-next-line react-hooks/set-state-in-effect
+		// eslint-disable-next-line react-hooks/set-state-in-effect,@eslint-react/set-state-in-effect
 		setReduced(media.matches);
 	}, [ ]);