Update to include sonarqube

.gitignore

@@ -6,6 +6,13 @@ node_modules
 dist
 *.local
 .tanstack
+*.tgz
+test/coverage
 
 # Editor directories and files
 .vscode
+
+# Sonarqube
+sonarBuild.sh
+sonarBuild.ps1
+.scannerwork

README.md

@@ -1,69 +1 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
-
-```js
-export default tseslint.config([
-	globalIgnores(['dist']),
-	{
-		files: ['**/*.{ts,tsx}'],
-		extends: [
-			// Other configs...
-
-			// Remove tseslint.configs.recommended and replace with this
-			...tseslint.configs.recommendedTypeChecked,
-			// Alternatively, use this for stricter rules
-			...tseslint.configs.strictTypeChecked,
-			// Optionally, add this for stylistic rules
-			...tseslint.configs.stylisticTypeChecked,
-
-			// Other configs...
-		],
-		languageOptions: {
-			parserOptions: {
-				project: ['./tsconfig.node.json', './tsconfig.app.json'],
-				tsconfigRootDir: import.meta.dirname,
-			},
-			// other options...
-		},
-	},
-])
-```
-
-You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
-
-```js
-// eslint.config.js
-import reactX from 'eslint-plugin-react-x'
-import reactDom from 'eslint-plugin-react-dom'
-
-export default tseslint.config([
-	globalIgnores(['dist']),
-	{
-		files: ['**/*.{ts,tsx}'],
-		extends: [
-			// Other configs...
-			// Enable lint rules for React
-			reactX.configs['recommended-typescript'],
-			// Enable lint rules for React DOM
-			reactDom.configs.recommended,
-		],
-		languageOptions: {
-			parserOptions: {
-				project: ['./tsconfig.node.json', './tsconfig.app.json'],
-				tsconfigRootDir: import.meta.dirname,
-			},
-			// other options...
-		},
-	},
-])
-```
+Under Construction

TODO.txt

@@ -0,0 +1,4 @@
+Inputs:
+	slider, multi-value slider
+
+Move providers to context and components to providers

eslint.config.ts

@@ -1,37 +1,51 @@
 import js from "@eslint/js";
 import pluginRouter from "@tanstack/eslint-plugin-router";
+import react from "eslint-plugin-react";
 import reactHooks from "eslint-plugin-react-hooks";
 import reactRefresh from "eslint-plugin-react-refresh";
-import { globalIgnores } from "eslint/config";
+import { defineConfig, globalIgnores } from "eslint/config";
 import globals from "globals";
 import tseslint from "typescript-eslint";
 
 
-export default tseslint.config([
+export default defineConfig([
 	globalIgnores(['dist']),
 	{
 		files: ['**/*.{ts,tsx}'],
 		extends: [
 			js.configs.recommended,
+			react.configs.flat.recommended,
 			tseslint.configs.recommendedTypeChecked,
-			reactHooks.configs['recommended-latest'],
+			reactHooks.configs.flat["recommended-latest"],
 			reactRefresh.configs.vite,
-			...pluginRouter.configs["flat/recommended"]
+			pluginRouter.configs["flat/recommended"]
 		],
 		languageOptions: {
-			ecmaVersion: 2020,
-			globals: globals.browser
-		},
-		plugins: {
-			"react-hooks": reactHooks,
-			"react-refresh": reactRefresh
+			ecmaVersion: 2022,
+			globals: globals.browser,
+			parserOptions: {
+				project: [
+					"./tsconfig.json",
+					"./tsconfig.app.json",
+					"./tsconfig.lib.json",
+					"./tsconfig.node.json",
+					"./tsconfig.test.json"
+				],
+				tsconfigRootDir: import.meta.dirname
+			}
 		},
 		rules: {
 			...reactHooks.configs.recommended.rules,
 			"react-refresh/only-export-components": [
 				"warn",
 				{ allowConstantExport: true }
-			]
+			],
+			"react/react-in-jsx-scope": "off"
+		},
+		settings: {
+			react: {
+				version: "detect"
+			}
 		}
 	}
 ]);

lib/component/button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 
 
@@ -16,15 +16,15 @@ export default function Button(props: ButtonProps){
 
 	return (
 		<button
+			data-testid="mattrixwv-button"
 			{...buttonProps}
 			disabled={disabled}
 			className={clsx(
 				className,
 				//Rounding
 				{
-					"rounded-none": rounding === "none",
 					"rounded-sm": rounding === "sm",
-					"rounded": rounding === "md",
+					"rounded-md": rounding === "md",
 					"rounded-lg": rounding === "lg",
 					"rounded-full": rounding === "full"
 				},

lib/component/button/DangerButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function DangerButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-danger-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/DarkButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function DarkButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-dark-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/InfoButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function InfoButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-info-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/LightButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function LightButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-light-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/MoltenButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function MoltenButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-molten-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/PrimaryButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function PrimaryButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-primary-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/SecondaryButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function SecondaryButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-secondary-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/SuccessButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function SuccessButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-success-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/TertiaryButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function TertiaryButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-tertiary-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/button/WarningButton.tsx

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "$/types/Button";
+import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
 import Button from "./Button";
 
@@ -13,6 +13,7 @@ export default function WarningButton(props: ButtonProps){
 
 	return (
 		<Button
+			data-testid="mattrixwv-warning-button"
 			{...props}
 			className={clsx(
 				"transition duration-300",

lib/component/checkbox.ts

@@ -0,0 +1,26 @@
+import DangerCheckbox from "./input/checkbox/DangerCheckbox";
+import DarkCheckbox from "./input/checkbox/DarkCheckbox";
+import InfoCheckbox from "./input/checkbox/InfoCheckbox";
+import LightCheckbox from "./input/checkbox/LightCheckbox";
+import MattrixwvCheckbox from "./input/checkbox/MattrixwvCheckbox";
+import MoltenCheckbox from "./input/checkbox/MoltenCheckbox";
+import PrimaryCheckbox from "./input/checkbox/PrimaryCheckbox";
+import SecondaryCheckbox from "./input/checkbox/SecondaryCheckbox";
+import SuccessCheckbox from "./input/checkbox/SuccessCheckbox";
+import TertiaryCheckbox from "./input/checkbox/TertiaryCheckbox";
+import WarningCheckbox from "./input/checkbox/WarningCheckbox";
+
+
+export {
+	DangerCheckbox,
+	DarkCheckbox,
+	InfoCheckbox,
+	LightCheckbox,
+	MattrixwvCheckbox,
+	MoltenCheckbox,
+	PrimaryCheckbox,
+	SecondaryCheckbox,
+	SuccessCheckbox,
+	TertiaryCheckbox,
+	WarningCheckbox
+};

lib/component/input.ts

@@ -1,10 +1,26 @@
-import OptionInput from "./input/OptionInput";
-import SelectInput from "./input/SelectInput";
-import TextInput from "./input/TextInput";
+import DateInput from "./input/date/DateInput";
+import DateTimeInput from "./input/date/DateTimeInput";
+import TimeInput from "./input/date/TimeInput";
+import DragAndDropFileInput from "./input/file/DragAndDropFileInput";
+import FileInput from "./input/file/FileInput";
+import NumberInput from "./input/number/NumberInput";
+import OptionInput from "./input/text/OptionInput";
+import SelectInput from "./input/text/SelectInput";
+import TextArea from "./input/text/TextArea";
+import TextInput from "./input/text/TextInput";
 
 
 export {
+	DateInput,
+	DateTimeInput,
+	DragAndDropFileInput,
+	FileInput,
+	NumberInput,
+	//NumberSlider,
 	OptionInput,
 	SelectInput,
-	TextInput
+	TextArea,
+	TextInput,
+	TimeInput
 };
+

lib/component/input/SelectInput.tsx

@@ -1,41 +0,0 @@
-import type { SelectInputProps } from "$/types/Input";
-import { Listbox, ListboxButton, ListboxOptions } from "@headlessui/react";
-import clsx from "clsx";
-import { BsChevronDown } from "react-icons/bs";
-
-
-export default function SelectInput(props: SelectInputProps){
-	const {
-		label,
-		value,
-		onChange,
-		children
-	} = props;
-
-
-	return (
-		<Listbox
-			value={value}
-			onChange={onChange}
-		>
-			<div
-				className="relative w-full"
-			>
-				<ListboxButton
-					className={clsx(
-						"flex flex-row items-center justify-between w-full",
-						"outline rounded px-2 py-1"
-					)}
-				>
-					<span>{label}</span>
-					<span><BsChevronDown size={22}/></span>
-				</ListboxButton>
-				<ListboxOptions
-					className="absolute w-full max-h-60 overflow-scroll z-10 outline-none"
-				>
-					{children}
-				</ListboxOptions>
-			</div>
-		</Listbox>
-	);
-}

lib/component/input/checkbox/DangerCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function DangerCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-red-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-red-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/DarkCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function DarkCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-black group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-black": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/InfoCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function InfoCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-cyan-500 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-cyan-500": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/LightCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function LightCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-white group-data-checked:stroke-black": box,
+					"group-data-checked:stroke-white": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -0,0 +1,71 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import { Checkbox } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function MattrixwvCheckbox({
+	id,
+	className,
+	labelClassName,
+	name,
+	size = "sm",
+	box = true,
+	onChange,
+	checked,
+	defaultChecked,
+	strokeWidth = 2,
+	value,
+	children
+}: CheckboxProps){
+	return (
+		<Checkbox
+			id={id}
+			className={clsx(
+				"group cursor-pointer",
+				"flex flex-row items-center justify-center gap-x-2"
+			)}
+			name={name}
+			checked={checked}
+			defaultChecked={defaultChecked}
+			onChange={onChange}
+			value={value}
+		>
+			<div
+				className={clsx(
+					className,
+					{
+						"rounded border": box
+					},
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			>
+				<svg
+					viewBox="0 0 14 14"
+					fill="none"
+				>
+					<path
+						d="M3 8L6 11L11 3.5"
+						strokeWidth={strokeWidth}
+						strokeLinecap="round"
+						strokeLinejoin="round"
+					/>
+				</svg>
+			</div>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Checkbox>
+	);
+}

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function MoltenCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-orange-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-orange-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/PrimaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function PrimaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-blue-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-blue-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/SecondaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function SecondaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-neutral-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-neutral-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/SuccessCheckbox.tsx

@@ -0,0 +1,25 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function SuccessCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-green-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-green-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}
+

lib/component/input/checkbox/TertiaryCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function TertiaryCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-purple-600 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-purple-600": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/checkbox/WarningCheckbox.tsx

@@ -0,0 +1,24 @@
+import type { CheckboxProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvCheckbox from "./MattrixwvCheckbox";
+
+
+export default function WarningCheckbox({
+	className,
+	box = true,
+	...props
+}: CheckboxProps){
+	return (
+		<MattrixwvCheckbox
+			className={clsx(
+				className,
+				{
+					"group-data-checked:bg-yellow-500 group-data-checked:stroke-white": box,
+					"group-data-checked:stroke-yellow-500": !box
+				}
+			)}
+			box={box}
+			{...props}
+		/>
+	);
+}

lib/component/input/date/DateInput.tsx

@@ -0,0 +1,26 @@
+import type { DateInputProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import moment from "moment";
+
+
+export default function DateInput({
+	id,
+	className,
+	defaultValue,
+	value,
+	onChange
+}: DateInputProps){
+	return (
+		<input
+			type="date"
+			id={id}
+			className={clsx(
+				"border rounded-lg px-2 py-1",
+				className
+			)}
+			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
+			value={value ? moment(value).format("YYYY-MM-DD") : undefined}
+			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
+		/>
+	);
+}

lib/component/input/date/DateTimeInput.tsx

@@ -0,0 +1,26 @@
+import type { DateInputProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import moment from "moment";
+
+
+export default function DateTimeInput({
+	id,
+	className,
+	defaultValue,
+	value,
+	onChange
+}: DateInputProps){
+	return (
+		<input
+			type="datetime-local"
+			id={id}
+			className={clsx(
+				"border rounded-lg px-2 py-1 outline-none",
+				className
+			)}
+			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
+			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
+			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+		/>
+	);
+}

lib/component/input/date/TimeInput.tsx

@@ -0,0 +1,26 @@
+import type { DateInputProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import moment from "moment";
+
+
+export default function TimeInput({
+	id,
+	className,
+	defaultValue,
+	value,
+	onChange
+}: DateInputProps){
+	return (
+		<input
+			type="time"
+			id={id}
+			className={clsx(
+				"border rounded-lg px-2 py-1 outline-none",
+				className
+			)}
+			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
+			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
+			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+		/>
+	);
+}

lib/component/input/file/DragAndDropFileInput.tsx

@@ -0,0 +1,84 @@
+import type { FileInputProps } from "$/types/InputTypes";
+import { humanReadableBytes } from "$/util/FileUtil";
+import clsx from "clsx";
+import { useEffect, useRef, useState } from "react";
+
+
+export default function DragAndDropFileInput({
+	id,
+	className,
+	name,
+	minSize,
+	maxSize,
+	showFileName,
+	showSize,
+	onChange,
+	disabled,
+	children
+}: FileInputProps){
+	const [ file, setFile ] = useState<File>();
+	const inputRef = useRef<HTMLInputElement>(null);
+
+
+	useEffect(() => {
+		onChange?.(file);
+	}, [ file, onChange ]);
+
+	return (
+		<label
+			className={clsx(
+				"flex flex-col items-center justify-center border-2 rounded-lg w-full h-full cursor-pointer",
+				className
+			)}
+			onDragOver={(e) => e.preventDefault()}
+			onDrop={(e) => {
+				e.preventDefault();
+				setFile(e.dataTransfer.files[0]);
+				if(inputRef.current){ inputRef.current.files = e.dataTransfer.files; }
+			}}
+		>
+			<input
+				ref={inputRef}
+				type="file"
+				id={id}
+				className="sr-only"
+				name={name}
+				onChange={(e) => setFile(e.target.files?.[0])}
+				disabled={disabled}
+			/>
+			<div
+				className="flex flex-col items-center justify-between w-full h-full px-2"
+			>
+				{children}
+				<div
+					className="flex flex-row items-center justify-between gap-x-8 w-full"
+				>
+					{
+						showFileName &&
+						<div
+							className="text-center"
+						>
+							{file?.name}
+						</div>
+					}
+					{
+						showSize &&
+						<div
+							className={clsx(
+								{
+									"text-red-600": minSize && file?.size && file?.size < minSize,
+									"text-red-600 ": maxSize && file?.size && file?.size > maxSize,
+									"text-green-600": minSize && !maxSize && file?.size && file?.size > minSize,
+									"text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize,
+									" text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
+								}
+							)}
+						>
+							{humanReadableBytes(file?.size ?? 0)}
+						</div>
+					}
+				</div>
+			</div>
+		</label>
+	);
+}

lib/component/input/file/FileInput.tsx

@@ -0,0 +1,86 @@
+import { SecondaryButton } from "$/component/button";
+import type { FileInputProps } from "$/types/InputTypes";
+import { humanReadableBytes } from "$/util/FileUtil";
+import clsx from "clsx";
+import { useRef, useState } from "react";
+
+
+export default function FileInput({
+	id,
+	className,
+	name,
+	minSize,
+	maxSize,
+	showFileName,
+	showSize,
+	onChange,
+	disabled,
+	children
+}: FileInputProps){
+	const inputRef = useRef<HTMLInputElement>(null);
+	const [ file, setFile ] = useState<File>();
+
+
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-between w-full border-2 rounded-lg",
+				className
+			)}
+		>
+			<input
+				ref={inputRef}
+				id={id}
+				type="file"
+				className="sr-only"
+				name={name}
+				onChange={(e) => { setFile(e.target.files?.[0]); onChange?.(e.target.files?.[0]); }}
+				disabled={disabled}
+			/>
+			<div
+				className="flex flex-row items-center justify-between grow w-full px-2"
+			>
+				{
+					children && !showFileName &&
+					<div>{children}</div>
+				}
+				{
+					showFileName &&
+					<div>{file?.name}</div>
+				}
+				{
+					!children && !showFileName &&
+					<>&nbsp;</>
+				}
+				{
+					showSize &&
+					<div
+						className={clsx(
+							{
+								"text-red-600": minSize && file?.size && file?.size < minSize,
+								"text-red-600 ": maxSize && file?.size && file?.size > maxSize,
+								"text-green-600": minSize && !maxSize && file?.size && file?.size > minSize,
+								"text-green-600 ": !minSize && maxSize && file?.size && file?.size < maxSize,
+								" text-green-600": minSize && maxSize && file?.size && file?.size > minSize && file?.size < maxSize
+							}
+						)}
+					>
+						{humanReadableBytes(file?.size ?? 0)}
+					</div>
+				}
+			</div>
+			<div
+				className="border-l-2"
+			>
+				<SecondaryButton
+					className="text-nowrap rounded-r-lg"
+					rounding="none"
+					onClick={() => { inputRef.current?.click(); }}
+					disabled={disabled}
+				>
+					Click Me
+				</SecondaryButton>
+			</div>
+		</div>
+	);
+}

lib/component/input/number/NumberInput.tsx

@@ -0,0 +1,58 @@
+import type { NumberInputProps } from "$/types/InputTypes";
+import clsx from "clsx";
+
+
+export default function NumberInput({
+	id,
+	className,
+	inputClassName,
+	labelClassName,
+	name,
+	min,
+	max,
+	defaultValue,
+	value,
+	onChange,
+	disabled,
+	children
+}: NumberInputProps){
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
+			>
+				<input
+					type="number"
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent w-full",
+						"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+						inputClassName
+					)}
+					name={name}
+					min={min}
+					max={max}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={(e) => onChange?.(e.target.valueAsNumber)}
+					disabled={disabled}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{children}
+				</label>
+			</div>
+		</div>
+	);
+}

lib/component/input/number/NumberSlider.tsx

@@ -0,0 +1,36 @@
+import type { NumberSliderProps } from "$/types/InputTypes";
+import clsx from "clsx";
+
+
+export default function NumberSlider({
+	id,
+	className,
+	name,
+	min,
+	max,
+	step,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: NumberSliderProps){
+	return (
+		<input
+			type="range"
+			id={id}
+			className={clsx(
+				"w-full appearance-none [-moz-range-thumb:background:#04AA6D]",
+				"h-6 bg-blue-300 accent-blue-600",
+				className
+			)}
+			name={name}
+			min={min}
+			max={max}
+			step={step}
+			defaultValue={defaultValue}
+			value={value}
+			onChange={(e) => onChange?.(e.target.valueAsNumber)}
+			disabled={disabled}
+		/>
+	);
+}

lib/component/input/radio/DangerRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DangerRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-red-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/DarkRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function DarkRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-black",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/InfoRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function InfoRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-cyan-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/LightRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function LightRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-white",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/MoltenRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function MoltenRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-orange-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/PrimaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function PrimaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-blue-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/RadioButton.tsx

@@ -0,0 +1,44 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import { Radio } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioButton({
+	id,
+	className,
+	labelClassName,
+	size = "sm",
+	value,
+	children
+}: RadioButtonProps){
+	return (
+		<Radio
+			id={id}
+			value={value}
+			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+		>
+			<div
+				className={clsx(
+					"rounded-full not-group-data-checked:border",
+					className,
+					{
+						"": size === "none",
+						"size-3": size === "xs",
+						"size-4": size === "sm",
+						"size-5": size === "md",
+						"size-6": size === "lg",
+						"size-7": size === "xl"
+					}
+				)}
+			/>
+			{
+				children &&
+				<div
+					className={labelClassName}
+				>
+					{children}
+				</div>
+			}
+		</Radio>
+	);
+}

lib/component/input/radio/RadioList.tsx

@@ -0,0 +1,35 @@
+import type { RadioListProps } from "$/types/InputTypes";
+import { RadioGroup } from "@headlessui/react";
+import clsx from "clsx";
+
+
+export default function RadioList({
+	id,
+	className,
+	name,
+	value,
+	onChange,
+	defaultValue,
+	direction = "horizontal",
+	children
+}: RadioListProps){
+	return (
+		<RadioGroup
+			id={id}
+			className={clsx(
+				"flex items-center justify-center",
+				className,
+				{
+					"flex-row gap-x-8": direction === "horizontal",
+					"flex-col gap-y-2": direction === "vertical"
+				}
+			)}
+			name={name}
+			value={value}
+			onChange={onChange}
+			defaultValue={defaultValue}
+		>
+			{children}
+		</RadioGroup>
+	);
+}

lib/component/input/radio/SecondaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SecondaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-neutral-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/SuccessRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function SuccessRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-green-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/TertiaryRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function TertiaryRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-purple-600",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/radio/WarningRadioButton.tsx

@@ -0,0 +1,19 @@
+import type { RadioButtonProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import RadioButton from "./RadioButton";
+
+
+export default function WarningRadioButton({
+	className,
+	...props
+}: RadioButtonProps){
+	return (
+		<RadioButton
+			className={clsx(
+				"group-data-checked:bg-yellow-500",
+				className
+			)}
+			{...props}
+		/>
+	);
+}

lib/component/input/switch/ButtonSwitch.tsx

@@ -0,0 +1,35 @@
+import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
+import { Switch } from "@headlessui/react";
+
+
+export default function ButtonSwitch({
+	id,
+	className,
+	name,
+	value,
+	defaultChecked,
+	checked,
+	onChange,
+	disabled,
+	onNode,
+	offNode
+}: MattrixwvButtonSwitchProps){
+	return (
+		<Switch
+			id={id}
+			className={className}
+			name={name}
+			value={value}
+			defaultChecked={defaultChecked}
+			checked={checked}
+			onChange={onChange}
+			disabled={disabled}
+		>
+			{({ checked }) => (
+				<>
+					{checked ? onNode : offNode}
+				</>
+			)}
+		</Switch>
+	);
+}

lib/component/input/switch/DangerSwitch.tsx

@@ -1,7 +1,33 @@
-export default function DangerSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function DangerSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Danger Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-red-600": !disabled,
+					"data-checked:bg-red-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-300": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/DarkSwitch.tsx

@@ -1,7 +1,33 @@
-export default function DarkSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function DarkSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Dark Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-black": !disabled,
+					"data-checked:bg-neutral-800/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-300": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/LightSwitch.tsx

@@ -1,7 +1,33 @@
-export default function LightSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function LightSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Light Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-white": !disabled,
+					"data-checked:bg-neutral-300/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-black": !disabled,
+					"bg-neutral-800": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -0,0 +1,108 @@
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import { Field, Label, Switch } from "@headlessui/react";
+import clsx from "clsx";
+import { Fragment } from "react/jsx-runtime";
+
+
+export default function MattrixwvSwitch({
+	id,
+	className,
+	knobClassName,
+	size = "sm",
+	wide,
+	name,
+	value,
+	defaultChecked,
+	checked,
+	onChange,
+	disabled,
+	children,
+	offText,
+	onText
+}: MattrixwvSwitchProps){
+	return (
+		<Field as={Fragment}>
+			<Switch
+				id={id}
+				className={clsx(
+					"relative group inline-flex items-center rounded-full transition",
+					className,
+					{
+						"cursor-pointer": !disabled,
+						"cursor-default": disabled
+					},
+					{
+						//Normal
+						"h-4 w-7": size === "xs" && !wide,
+						"h-5 w-9": size === "sm" && !wide,
+						"h-6 w-11": size === "md" && !wide,
+						"h-7 w-13": size === "lg" && !wide,
+						"h-8 w-15": size === "xl" && !wide,
+
+						//Wide
+						"h-4 w-9": size === "xs" && wide,
+						"h-5 w-11": size === "sm" && wide,
+						"h-6 w-13": size === "md" && wide,
+						"h-7 w-15": size === "lg" && wide,
+						"h-8 w-17": size === "xl" && wide
+					}
+				)}
+				name={name}
+				value={value}
+				defaultChecked={defaultChecked}
+				checked={checked}
+				onChange={onChange}
+				disabled={disabled}
+			>
+				{
+					offText &&
+					<span className="block group-data-checked:hidden absolute right-2">{offText}</span>
+				}
+				{
+					onText &&
+					<span className="hidden group-data-checked:block absolute left-2">{onText}</span>
+				}
+				<span
+					className={clsx(
+						"rounded-full transition",
+						knobClassName,
+						//Size
+						{
+							"size-2": size === "xs",
+							"size-3": size === "sm",
+							"size-4": size === "md",
+							"size-5": size === "lg",
+							"size-6": size === "xl"
+						},
+						//Transitions
+						{
+							//Normal
+							"translate-x-1 group-data-checked:translate-x-4": size === "xs" && !wide,
+							"translate-x-1 group-data-checked:translate-x-5": size === "sm" && !wide,
+							"translate-x-1 group-data-checked:translate-x-6": size === "md" && !wide,
+							"translate-x-1 group-data-checked:translate-x-7": size === "lg" && !wide,
+							"translate-x-1 group-data-checked:translate-x-8": size === "xl" && !wide,
+
+							//Wide
+							"translate-x-1 group-data-checked:translate-x-6 ": size === "xs" && wide,
+							"translate-x-1 group-data-checked:translate-x-7 ": size === "sm" && wide,
+							"translate-x-1 group-data-checked:translate-x-8 ": size === "md" && wide,
+							"translate-x-1 group-data-checked:translate-x-9 ": size === "lg" && wide,
+							"translate-x-1 group-data-checked:translate-x-10 ": size === "xl" && wide
+						}
+					)}
+				/>
+			</Switch>
+			<Label
+				className={clsx(
+					{
+						"cursor-pointer": !disabled,
+						"cursor-default": disabled
+					}
+				)}
+			>
+				{children}
+			</Label>
+		</Field>
+	);
+}

lib/component/input/switch/PlainSwitch.tsx

@@ -1,7 +0,0 @@
-export default function PlainSwitch(){
-	return (
-		<div>
-			Plain Switch
-		</div>
-	);
-}

lib/component/input/switch/PrimarySwitch.tsx

@@ -1,7 +1,33 @@
-export default function PrimarySwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function PrimarySwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Primary Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-blue-600": !disabled,
+					"data-checked:bg-blue-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/SecondarySwitch.tsx

@@ -1,7 +1,33 @@
-export default function SecondarySwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function SecondarySwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Secondary Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-neutral-600": !disabled,
+					"data-checked:bg-neutral-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,7 +1,32 @@
-export default function SuccessDangerSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function SuccessDangerSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Success Danger Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				className,
+				{
+					"bg-red-600 data-checked:bg-green-600": !disabled,
+					"bg-red-400/80 data-checked:bg-green-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/SuccessSwitch.tsx

@@ -1,7 +1,33 @@
-export default function SuccessSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function SuccessSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Success Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-green-600": !disabled,
+					"data-checked:bg-green-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/Switch.tsx

@@ -1,7 +0,0 @@
-export default function Switch(){
-	return (
-		<div>
-			Switch
-		</div>
-	);
-}

lib/component/input/switch/TertiarySwitch.tsx

@@ -1,7 +1,33 @@
-export default function TertiarySwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function TertiarySwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Tertiary Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-purple-600": !disabled,
+					"data-checked:bg-purple-400/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/WarningSwitch.tsx

@@ -1,7 +1,33 @@
-export default function WarningSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function WarningSwitch({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
-			Warning Switch
-		</div>
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-yellow-500": !disabled,
+					"data-checked:bg-yellow-300/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-gray-300": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/text/OptionInput.tsx

@@ -1,4 +1,4 @@
-import type { OptionInputProps } from "$/types/Input";
+import type { OptionInputProps } from "$/types/InputTypes";
 import { ListboxOption } from "@headlessui/react";
 import clsx from "clsx";
 

lib/component/input/text/SelectInput.tsx

@@ -0,0 +1,39 @@
+import type { SelectInputProps } from "$/types/InputTypes";
+import { Listbox, ListboxButton, ListboxOptions } from "@headlessui/react";
+import clsx from "clsx";
+import { BsChevronDown } from "react-icons/bs";
+
+
+export default function SelectInput(props: SelectInputProps){
+	const {
+		label,
+		value,
+		onChange,
+		children
+	} = props;
+
+
+	return (
+		<Listbox
+			value={value}
+			onChange={onChange}
+		>
+			<ListboxButton
+				className={clsx(
+					"group relative flex flex-row items-center justify-between w-full",
+					"border-2 px-2 py-1 rounded-lg"
+					//"not-data-open:rounded-lg data-open:rounded-t-lg"
+				)}
+			>
+				<span>{label}</span>
+				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
+			</ListboxButton>
+			<ListboxOptions
+				className="w-(--button-width) max-h-60! overflow-hidden z-10 outline-none rounded-lg"
+				anchor="bottom"
+			>
+				{children}
+			</ListboxOptions>
+		</Listbox>
+	);
+}

lib/component/input/text/TextArea.tsx

@@ -0,0 +1,64 @@
+import type { TextAreaProps } from "$/types/InputTypes";
+import clsx from "clsx";
+
+
+export default function TextArea({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	name,
+	maxLength,
+	rows,
+	cols,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextAreaProps){
+	return (
+		<div
+			className={clsx(
+				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
+			>
+				<textarea
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent w-full",
+						inputClassName
+					)}
+					placeholder={placeholder}
+					name={name}
+					maxLength={maxLength}
+					rows={rows}
+					cols={cols}
+					defaultValue={defaultValue}
+					value={value}
+					onChange={onChange}
+					disabled={disabled}
+					spellCheck={spellCheck}
+				/>
+				<label
+					className={clsx(
+						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
+						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
+						"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
+						"flex items-center",
+						labelClassName
+					)}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					htmlFor={id}
+				>
+					{placeholder}
+				</label>
+			</div>
+		</div>
+	);
+}

lib/component/input/text/TextInput.tsx

@@ -1,52 +1,56 @@
-import type { TextInputProps } from "$/types/Input";
+import type { TextInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
 
 
-export default function TextInput(props: TextInputProps){
-	const {
-		id,
-		className,
-		inputClassName,
-		labelClassName,
-		placeholder,
-		defaultValue,
-		value,
-		onChange,
-		disabled
-	} = props;
-
-
+export default function TextInput({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	name,
+	maxLength,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextInputProps){
 	return (
 		<div
 			className={clsx(
-				"flex flex-row items-center justify-center rounded-lg border-2",
+				"flex flex-row items-center justify-center rounded-lg border-2 w-full",
 				className
 			)}
 		>
 			<div
-				className="relative flex flex-row items-center justify-center px-2 py-1"
+				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
 			>
 				<input
 					type="text"
 					id={id}
 					className={clsx(
-						"peer bg-transparent outline-none placeholder-transparent",
+						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
 					)}
+					name={name}
 					placeholder={placeholder}
+					maxLength={maxLength}
 					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
+					spellCheck={spellCheck}
 				/>
 				<label
 					className={clsx(
 						"absolute ml-2 -top-3 left-0 text-sm rounded-md px-1 select-none cursor-default",
-						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text",
+						"peer-placeholder-shown:top-0 peer-placeholder-shown:-left-1 peer-placeholder-shown:text-inherit peer-placeholder-shown:text-base peer-placeholder-shown:bg-transparent peer-placeholder-shown:h-full peer-placeholder-shown:cursor-text peer-placeholder-shown:w-[99%]",
+						"peer-focus:-top-3 peer-focus:left-0 peer-focus:text-sm peer-focus:w-auto peer-focus:h-auto",
 						"flex items-center",
 						labelClassName
 					)}
-					style={{ transitionProperty: "top,, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
+					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
 					htmlFor={id}
 				>
 					{placeholder}

lib/component/loading/bar/CenterGrowingBars.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBarsProps } from "$/types/Loading";
+import type { LoadingBarsProps } from "$/types/LoadingTypes";
 
 
 export default function CenterGrowingBars({

lib/component/loading/bar/CircleBars.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBarsProps } from "$/types/Loading";
+import type { LoadingBarsProps } from "$/types/LoadingTypes";
 
 
 export default function CircleBars({

lib/component/loading/bar/FadingBars.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBarsProps } from "$/types/Loading";
+import type { LoadingBarsProps } from "$/types/LoadingTypes";
 
 
 export default function FadingBars({

lib/component/loading/bar/FadingGrowingBars.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBarsProps } from "$/types/Loading";
+import type { LoadingBarsProps } from "$/types/LoadingTypes";
 
 
 export default function FadingGrowingBars({

lib/component/loading/bar/GrowingBars.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBarsProps } from "$/types/Loading";
+import type { LoadingBarsProps } from "$/types/LoadingTypes";
 
 
 export default function GrowingBars({

lib/component/loading/block/PulsingBlocks.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBlocksProps } from "$/types/Loading";
+import type { LoadingBlocksProps } from "$/types/LoadingTypes";
 
 
 export default function PulsingBlocks({

lib/component/loading/block/SlidingBlocks2.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBlocksProps } from "$/types/Loading";
+import type { LoadingBlocksProps } from "$/types/LoadingTypes";
 
 
 export default function SlidingBlocks2({

lib/component/loading/block/SlidingBlocks3.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBlocksProps } from "$/types/Loading";
+import type { LoadingBlocksProps } from "$/types/LoadingTypes";
 
 
 export default function SlidingBlocks3({

lib/component/loading/block/WaveBlocks.tsx

@@ -1,4 +1,4 @@
-import type { LoadingBlocksProps } from "$/types/Loading";
+import type { LoadingBlocksProps } from "$/types/LoadingTypes";
 
 
 export default function WaveBlocks({

lib/component/loading/dot/BouncingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function BouncingDots({
@@ -26,6 +26,7 @@ export default function BouncingDots({
 				r="3"
 				className={className}
 				stroke={stroke}
+				fill={fill}
 			>
 				<animate
 					id={`firstBouncingDots_${id}`}
@@ -43,6 +44,7 @@ export default function BouncingDots({
 				r="3"
 				className={className}
 				stroke={stroke}
+				fill={fill}
 			>
 				<animate
 					id={`secondBouncingDots_${id}`}
@@ -60,6 +62,7 @@ export default function BouncingDots({
 				r="3"
 				className={className}
 				stroke={stroke}
+				fill={fill}
 			>
 				<animate
 					id={`lastBouncingDots_${id}`}

lib/component/loading/dot/CircleCenterDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CircleCenterDots({

lib/component/loading/dot/CircleFadingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CircleFadingDots({

lib/component/loading/dot/CirclePulsingDots.tsx

@@ -1,4 +1,4 @@
-import type { CirclePulsingDotsProps } from "$/types/Loading";
+import type { CirclePulsingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CirclePulsingDots({

lib/component/loading/dot/CircleRotatingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CircleRotatingDots({

lib/component/loading/dot/CircleShrinkingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CircleShrinkingDots({

lib/component/loading/dot/CircleSpinningDot.tsx

@@ -1,4 +1,4 @@
-import type { CircleSpinningDotProps } from "$/types/Loading";
+import type { CircleSpinningDotProps } from "$/types/LoadingTypes";
 
 export default function CircleSpinningDot({
 	width,

lib/component/loading/dot/CyclingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function CyclingDots({

lib/component/loading/dot/FadingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function FadingDots({

lib/component/loading/dot/PulsingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function PulsingDots({

lib/component/loading/dot/RotatingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 export default function RotatingDots({
 	width,

lib/component/loading/dot/SwellingDots.tsx

@@ -1,4 +1,4 @@
-import type { LoadingDotsProps } from "$/types/Loading";
+import type { LoadingDotsProps } from "$/types/LoadingTypes";
 
 
 export default function SwellingDots({

lib/component/loading/drop/DoubleDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function DoubleDrop({

lib/component/loading/drop/DoubleWaveDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function DoubleWaveDrop({

lib/component/loading/drop/Drop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function Drop({

lib/component/loading/drop/QuickDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function QuickDrop({

lib/component/loading/drop/QuickWaveDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function QuickWaveDrop({

lib/component/loading/drop/TripleDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function TripleDrop({

lib/component/loading/drop/TripleWaveDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function TripleWaveDrop({

lib/component/loading/drop/WaveDrop.tsx

@@ -1,4 +1,4 @@
-import type { LoadingPulseProps } from "$/types/Loading";
+import type { LoadingPulseProps } from "$/types/LoadingTypes";
 
 
 export default function WaveDrop({

lib/component/loading/spinner/HalfSpinner.tsx

@@ -1,4 +1,4 @@
-import type { LoadingSpinnerProps } from "$/types/Loading";
+import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
 
 
 export default function HalfSpinner({

lib/component/loading/spinner/QuarterSpinner.tsx

@@ -1,4 +1,4 @@
-import type { LoadingSpinnerProps } from "$/types/Loading";
+import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
 
 
 export default function QuarterSpinner({

lib/component/loading/spinner/RubberSpinner.tsx

@@ -1,4 +1,4 @@
-import type { RubberLoadingSpinnerProps } from "$/types/Loading";
+import type { RubberLoadingSpinnerProps } from "$/types/LoadingTypes";
 
 
 export default function RubberSpinner({
@@ -35,8 +35,8 @@ export default function RubberSpinner({
 					className={className}
 					stroke={stroke}
 					fill={fill}
-					stroke-width="3"
-					stroke-linecap="round"
+					strokeWidth="3"
+					strokeLinecap="round"
 				>
 					<animate
 						attributeName="stroke-dasharray"

lib/component/loading/spinner/ThreeQuarterSpinner.tsx

@@ -1,4 +1,4 @@
-import type { LoadingSpinnerProps } from "$/types/Loading";
+import type { LoadingSpinnerProps } from "$/types/LoadingTypes";
 
 
 export default function ThreeQuarterSpinner({

lib/component/loading/various/BouncingDot.tsx

@@ -1,4 +1,4 @@
-import type { LoadingVariousProps } from "$/types/Loading";
+import type { LoadingVariousProps } from "$/types/LoadingTypes";
 
 
 export default function BouncingDot({

lib/component/loading/various/PulsingLine.tsx

@@ -1,4 +1,4 @@
-import type { LoadingVariousProps } from "$/types/Loading";
+import type { LoadingVariousProps } from "$/types/LoadingTypes";
 
 
 export default function PulsingLine({