Complete configuration for build

eslint.config.js

@@ -18,13 +18,13 @@ export default tseslint.config([
 			tseslint.configs.recommendedTypeChecked,
 			reactHooks.configs['recommended-latest'],
 			reactRefresh.configs.vite,
-			...pluginRouter.configs["flat/recommended"]
+			pluginRouter.configs["flat/recommended"]
 		],
 		languageOptions: {
 			ecmaVersion: 2022,
 			globals: globals.browser,
 			parserOptions: {
-				project: "./tsconfig.json",
+				project: ["./tsconfig.json", "./tsconfig.app.json", "./tsconfig.lib.json", "./tsconfig.node.json"],
 				tsconfigRootDir: import.meta.dirname
 			}
 		},
@@ -33,7 +33,13 @@ export default tseslint.config([
 			"react-refresh/only-export-components": [
 				"warn",
 				{ allowConstantExport: true }
-			]
+			],
+			"react/react-in-jsx-scope": "off"
+		},
+		settings: {
+			react: {
+				version: "detect"
+			}
 		}
 	}
 ]);

lib/component/button/Button.tsx

@@ -22,7 +22,6 @@ export default function Button(props: ButtonProps){
 				className,
 				//Rounding
 				{
-					"rounded-none": rounding === "none",
 					"rounded-sm": rounding === "sm",
 					"rounded": rounding === "md",
 					"rounded-lg": rounding === "lg",

lib/component/input/file/DragAndDropFileInput.tsx

@@ -22,7 +22,7 @@ export default function DragAndDropFileInput({
 
 	useEffect(() => {
 		onChange?.(file);
-	}, [ file ]);
+	}, [ file, onChange ]);
 
 	return (
 		<label

lib/component/loading/spinner/RubberSpinner.tsx

@@ -35,8 +35,8 @@ export default function RubberSpinner({
 					className={className}
 					stroke={stroke}
 					fill={fill}
-					stroke-width="3"
+					strokeWidth="3"
-					stroke-linecap="round"
+					strokeLinecap="round"
 				>
 					<animate
 						attributeName="stroke-dasharray"

lib/index.ts

@@ -0,0 +1,11 @@
+export * from "$/component/button";
+export * from "$/component/input";
+export * from "$/component/loading";
+export * from "$/component/message";
+export * from "$/component/modal";
+export * from "$/component/nav";
+export * from "$/component/progress";
+export * from "$/component/tab";
+export * from "$/component/theme";
+export * from "$/component/toaster";
+

lib/providers/theme/ThemeProvider.tsx

@@ -7,7 +7,7 @@ const themeInitialState: ThemeProviderState = {
 	setTheme: () => null
 }
 
-export const ThemeProviderContext = createContext<ThemeProviderState>(themeInitialState);
+const ThemeProviderContext = createContext<ThemeProviderState>(themeInitialState);
 
 
 export default function ThemeProvider(props: ThemeProviderProps){
@@ -40,7 +40,7 @@ export default function ThemeProvider(props: ThemeProviderProps){
 			localStorage.setItem(storageKey, theme);
 			setTheme(theme);
 		}
-	}), [ theme ]);
+	}), [storageKey, theme]);
 
 	return (
 		<ThemeProviderContext.Provider value={value}>
@@ -50,6 +50,7 @@ export default function ThemeProvider(props: ThemeProviderProps){
 }
 
 
+// eslint-disable-next-line react-refresh/only-export-components
 export function useTheme(){
 	const context = useContext(ThemeProviderContext);
 

lib/providers/toaster/ToasterProvider.tsx

@@ -14,7 +14,7 @@ const toastInitialState: ToastProviderState = {
 	addDanger: () => ""
 };
 
-export const ToasterProviderContext = createContext<ToastProviderState>(toastInitialState);
+const ToasterProviderContext = createContext<ToastProviderState>(toastInitialState);
 
 
 export default function ToasterProvider({
@@ -37,7 +37,7 @@ export default function ToasterProvider({
 				return prev.filter((toast) => toast.id !== id);
 			}
 		});
-	}, [ toast ]);
+	}, []);
 
 	const addToast = useCallback((message: React.ReactNode, duration?: number) => {
 		if(!duration){
@@ -49,7 +49,7 @@ export default function ToasterProvider({
 		setTimeout(() => hideToast(id), duration);
 
 		return id;
-	}, [ toast ]);
+	}, [hideToast]);
 
 	const addSuccess = useCallback((message: React.ReactNode, duration?: number) => {
 		return addToast(<SuccessMessageBlock>{message}</SuccessMessageBlock>, duration);
@@ -84,6 +84,7 @@ export default function ToasterProvider({
 }
 
 
+// eslint-disable-next-line react-refresh/only-export-components
 export function useToaster(){
 	const context = useContext(ToasterProviderContext);
 

lib/types/Loading.d.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
 interface LoadingDefaultProps {
 	width?: string | number;
 	height?: string | number;

package.json

@@ -5,7 +5,7 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "tsc -b && vite build",
+		"build": "eslint . && tsc -b && vite build",
 		"lint": "eslint .",
 		"preview": "vite preview"
 	},

src/util/InputUtils.tsx

@@ -513,8 +513,9 @@ export function TextContent(){
 								key={option.value}
 								className="bg-neutral-600 hover:bg-neutral-700"
 								value={option.value}
-								children={option.label}
+							>
-							/>
+								{option.label}
+							</OptionInput>
 						))
 					}
 				</SelectInput>

src/util/LoadingUtils.tsx

@@ -43,6 +43,7 @@ import Wifi from "$/component/loading/various/Wifi";
 import type { JSX } from "react";
 
 
+// eslint-disable-next-line react-refresh/only-export-components
 function LoadingGroup({
 	label,
 	elements
@@ -87,9 +88,11 @@ export function generateSpinnersContent(){
 				label="Quarter Spinner"
 				elements={[
 					<QuarterSpinner
+						key={1}
 						className="fill-blue-600"
 					/>,
 					<QuarterSpinner
+						key={2}
 						trackClassName="fill-neutral-700 dark:fill-zinc-700"
 						className="fill-blue-600"
 					/>
@@ -99,9 +102,11 @@ export function generateSpinnersContent(){
 				label="Half Spinner"
 				elements={[
 					<HalfSpinner
+						key={1}
 						className="fill-blue-600"
 					/>,
 					<HalfSpinner
+						key={2}
 						trackClassName="fill-neutral-700 dark:fill-zinc-700"
 						className="fill-blue-600"
 					/>
@@ -111,9 +116,11 @@ export function generateSpinnersContent(){
 				label="Three-Quarter Spinner"
 				elements={[
 					<ThreeQuarterSpinner
+						key={1}
 						className="fill-blue-600"
 					/>,
 					<ThreeQuarterSpinner
+						key={2}
 						trackClassName="fill-neutral-700 dark:fill-zinc-700"
 						className="fill-blue-600"
 					/>
@@ -123,9 +130,11 @@ export function generateSpinnersContent(){
 				label="Rubber Spinner"
 				elements={[
 					<RubberSpinner
+						key={1}
 						stroke="#155dfc"
 					/>,
 					<RubberSpinner
+						key={2}
 						trackClassName="fill-neutral-700 dark:fill-zinc-700"
 						stroke="#155dfc"
 					/>
@@ -144,6 +153,7 @@ export function generateDotsContent(){
 				label="Bouncing"
 				elements={[
 					<BouncingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -152,6 +162,7 @@ export function generateDotsContent(){
 				label="Fading"
 				elements={[
 					<FadingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -160,6 +171,7 @@ export function generateDotsContent(){
 				label="Cycling"
 				elements={[
 					<CyclingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -168,6 +180,7 @@ export function generateDotsContent(){
 				label="Rotating"
 				elements={[
 					<RotatingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -176,6 +189,7 @@ export function generateDotsContent(){
 				label="Swelling"
 				elements={[
 					<SwellingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -184,6 +198,7 @@ export function generateDotsContent(){
 				label="Pulsing"
 				elements={[
 					<PulsingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -192,6 +207,7 @@ export function generateDotsContent(){
 				label="Circle Fading"
 				elements={[
 					<CircleFadingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -200,6 +216,7 @@ export function generateDotsContent(){
 				label="Circle Shrinking"
 				elements={[
 					<CircleShrinkingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -208,6 +225,7 @@ export function generateDotsContent(){
 				label="Circle Center"
 				elements={[
 					<CircleCenterDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -216,6 +234,7 @@ export function generateDotsContent(){
 				label="Circle Rotating"
 				elements={[
 					<CircleRotatingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -224,6 +243,7 @@ export function generateDotsContent(){
 				label="Circle Pulsing"
 				elements={[
 					<CirclePulsingDots
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -232,6 +252,7 @@ export function generateDotsContent(){
 				label="Circle Spinning"
 				elements={[
 					<CircleSpinningDot
+						key={1}
 						trackClassName="fill-neutral-700 dark:fill-zinc-700"
 						className="fill-blue-600"
 					/>
@@ -250,6 +271,7 @@ export function generateBarsContent(){
 				label="Fading Bars"
 				elements={[
 					<FadingBars
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -258,6 +280,7 @@ export function generateBarsContent(){
 				label="Growing Bars"
 				elements={[
 					<GrowingBars
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -266,6 +289,7 @@ export function generateBarsContent(){
 				label="Fading Growing Bars"
 				elements={[
 					<FadingGrowingBars
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -274,6 +298,7 @@ export function generateBarsContent(){
 				label="Center Growing Bars"
 				elements={[
 					<CenterGrowingBars
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -282,6 +307,7 @@ export function generateBarsContent(){
 				label="Circle Bars"
 				elements={[
 					<CircleBars
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -299,6 +325,7 @@ export function generateBlocksContent(){
 				label="Pulsing Blocks"
 				elements={[
 					<PulsingBlocks
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -307,6 +334,7 @@ export function generateBlocksContent(){
 				label="Sliding Blocks 2"
 				elements={[
 					<SlidingBlocks2
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -315,6 +343,7 @@ export function generateBlocksContent(){
 				label="Sliding Blocks 3"
 				elements={[
 					<SlidingBlocks3
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -323,6 +352,7 @@ export function generateBlocksContent(){
 				label="Wave Blocks"
 				elements={[
 					<WaveBlocks
+						key={1}
 						className="fill-blue-600 stroke-0 stroke-black"
 					/>
 				]}
@@ -340,6 +370,7 @@ export function generatePulsesContent(){
 				label="Drop"
 				elements={[
 					<Drop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -348,6 +379,7 @@ export function generatePulsesContent(){
 				label="Double Drop"
 				elements={[
 					<DoubleDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -356,6 +388,7 @@ export function generatePulsesContent(){
 				label="Triple Drop"
 				elements={[
 					<TripleDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -364,6 +397,7 @@ export function generatePulsesContent(){
 				label="Quick Drop"
 				elements={[
 					<QuickDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -372,6 +406,7 @@ export function generatePulsesContent(){
 				label="Wave Drop"
 				elements={[
 					<WaveDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -380,6 +415,7 @@ export function generatePulsesContent(){
 				label="Double Wave Drop"
 				elements={[
 					<DoubleWaveDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -388,6 +424,7 @@ export function generatePulsesContent(){
 				label="Triple Wave Drop"
 				elements={[
 					<TripleWaveDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -396,6 +433,7 @@ export function generatePulsesContent(){
 				label="Quick Wave Drop"
 				elements={[
 					<QuickWaveDrop
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -413,6 +451,7 @@ export function generateVariousContent(){
 				label="Bouncing Dot"
 				elements={[
 					<BouncingDot
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -421,6 +460,7 @@ export function generateVariousContent(){
 				label="Spinning Clock"
 				elements={[
 					<SpinningClock
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -429,6 +469,7 @@ export function generateVariousContent(){
 				label="Spinning Eclipse"
 				elements={[
 					<SpinningEclipse
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -437,6 +478,7 @@ export function generateVariousContent(){
 				label="Spinning Eclipse Half"
 				elements={[
 					<SpinningEclipseHalf
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -445,6 +487,7 @@ export function generateVariousContent(){
 				label="Pulsing Line"
 				elements={[
 					<PulsingLine
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -453,6 +496,7 @@ export function generateVariousContent(){
 				label="Spinning Binary"
 				elements={[
 					<SpinningBinary
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -461,6 +505,7 @@ export function generateVariousContent(){
 				label="Spinning Tadpole"
 				elements={[
 					<SpinningTadpole
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}
@@ -469,9 +514,11 @@ export function generateVariousContent(){
 				label="Wifi"
 				elements={[
 					<Wifi
+						key={1}
 						className="fill-blue-600"
 					/>,
 					<Wifi
+						key={2}
 						className="fill-blue-600"
 						fadeDuration={0.25}
 					/>
@@ -481,6 +528,7 @@ export function generateVariousContent(){
 				label="Spinning Galaxy"
 				elements={[
 					<SpinningGalaxy
+						key={1}
 						className="fill-blue-600"
 					/>
 				]}

tsconfig.json

@@ -4,5 +4,8 @@
 		{ "path": "./tsconfig.app.json" },
 		{ "path": "./tsconfig.node.json" },
 		{ "path": "./tsconfig.lib.json" }
-	]
+	],
+	"compilerOptions": {
+		"jsx": "react-jsx"
+	}
 }

tsconfig.lib.json

@@ -1,4 +1,7 @@
 {
 	"extends": "./tsconfig.app.json",
-	"include": [ "lib" ]
+	"include": [ "lib" ],
+	"compilerOptions": {
+		"jsx": "react-jsx"
+	}
 }

tsconfig.node.json

@@ -12,6 +12,7 @@
 		"verbatimModuleSyntax": true,
 		"moduleDetection": "force",
 		"noEmit": true,
+		"jsx": "react-jsx",
 
 		/* Linting */
 		"strict": true,

vite.config.ts

@@ -31,24 +31,25 @@ export default defineConfig({
 	},
 	build: {
 		lib: {
-			entry: {
+			entry: resolve(__dirname, "lib/index.ts"),
-				button: resolve(__dirname, "lib/component/button.ts"),
-				input: resolve(__dirname, "lib/component/input.ts"),
-				loading: resolve(__dirname, "lib/component/loading.ts"),
-				message: resolve(__dirname, "lib/component/message.ts"),
-				modal: resolve(__dirname, "lib/component/modal.ts"),
-				nav: resolve(__dirname, "lib/component/nav.ts"),
-				tab: resolve(__dirname, "lib/component/tab.ts"),
-				theme: resolve(__dirname, "lib/component/theme.ts"),
-				toaster: resolve(__dirname, "lib/component/toaster.ts")
-			},
 			formats: [ "es" ],
 			name: "Mattrixwv Component Library"
 		},
 		rollupOptions: {
 			external: [
-				Object.keys(dependencies).join("|")
+				"react",
-			]
+				"react-dom",
+				"react/jsx-runtime",
+				...Object.keys(dependencies)
+			],
+			output: {
+				globals: {
+					react: "React",
+					"react-dom": "ReactDOM"
+				},
+				manualChunks: undefined
+			}
 		}
-	}
+	},
+	publicDir: false
 });