Updated several input components

lib/component/input/SelectInput.tsx

@@ -18,24 +18,22 @@ export default function SelectInput(props: SelectInputProps){
 			value={value}
 			onChange={onChange}
 		>
-			<div
-				className="relative w-full"
+			<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"
+				)}
 			>
-				<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>
+				<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/TextArea.tsx

@@ -0,0 +1,61 @@
+import type { TextAreaProps } from "$/types/Input";
+import clsx from "clsx";
+
+
+export default function TextArea({
+	id = crypto.randomUUID().replaceAll("-", ""),
+	className,
+	inputClassName,
+	labelClassName,
+	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",
+				className
+			)}
+		>
+			<div
+				className="relative flex flex-row items-center justify-center px-2 py-1"
+			>
+				<textarea
+					id={id}
+					className={clsx(
+						"peer bg-transparent outline-none placeholder-transparent resize",
+						inputClassName
+					)}
+					placeholder={placeholder}
+					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",
+						"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/TextInput.tsx

@@ -2,20 +2,19 @@ import type { TextInputProps } from "$/types/Input";
 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,
+	maxLength,
+	spellCheck,
+	placeholder,
+	defaultValue,
+	value,
+	onChange,
+	disabled
+}: TextInputProps){
 	return (
 		<div
 			className={clsx(
@@ -34,10 +33,12 @@ export default function TextInput(props: TextInputProps){
 						inputClassName
 					)}
 					placeholder={placeholder}
+					maxLength={maxLength}
 					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
+					spellCheck={spellCheck}
 				/>
 				<label
 					className={clsx(
@@ -46,7 +47,7 @@ export default function TextInput(props: TextInputProps){
 						"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/types/Input.d.ts

@@ -3,10 +3,12 @@ import type { ChangeEventHandler } from "react";
 
 
 export interface TextInputProps {
-	id: string;
+	id?: string;
 	className?: string;
 	inputClassName?: string;
 	labelClassName?: string;
+	maxLength?: number;
+	spellCheck?: boolean;
 	placeholder?: string;
 	defaultValue?: string;
 	value?: string;
@@ -14,6 +16,12 @@ export interface TextInputProps {
 	disabled?: boolean;
 }
 
+export interface TextAreaProps extends TextInputProps{
+	rows?: number;
+	cols?: number;
+	onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+}
+
 export interface SelectInputProps {
 	label: React.ReactNode;
 	value?: string;

src/routes/input/index.tsx

@@ -1,20 +1,7 @@
-import { Button } from "$/component/button";
-import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
-import DangerSwitch from "$/component/input/switch/DangerSwitch";
-import DarkSwitch from "$/component/input/switch/DarkSwitch";
-import LightSwitch from "$/component/input/switch/LightSwitch";
-import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
-import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
-import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
-import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
-import SuccessSwitch from "$/component/input/switch/SuccessSwitch";
-import TertiarySwitch from "$/component/input/switch/TertiarySwitch";
-import WarningSwitch from "$/component/input/switch/WarningSwitch";
 import { MattrixwvTabGroup } from "$/component/tab";
-import type { MattrixwvSwitchSize } from "$/types/Input";
 import type { TabGroupContent } from "$/types/Tab";
+import { SwitchContent, TextContent } from "@/util/InputUtils";
 import { createFileRoute } from "@tanstack/react-router";
-import { BsCheck, BsX } from "react-icons/bs";
 
 
 export const Route = createFileRoute('/input/')({
@@ -24,6 +11,7 @@ export const Route = createFileRoute('/input/')({
 
 function InputPage(){
 	const tabs: TabGroupContent[] = [
+		{ tab: "Text", content: <TextContent/> },
 		{ tab: "Switch", content: <SwitchContent/> }
 	];
 
@@ -37,419 +25,3 @@ function InputPage(){
 		</div>
 	);
 }
-
-function SwitchContent(): React.ReactNode{
-	const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];
-
-
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-8 mt-8"
-		>
-			<SwitchDisplay title="Basic">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<MattrixwvSwitch
-								className="bg-gray-400 data-checked:bg-blue-600"
-								knobClassName="bg-white"
-								size={size}
-							>
-								{size} Switch
-							</MattrixwvSwitch>
-						</div>
-					))
-				}
-			</SwitchDisplay>
-			<SwitchDisplay title="Wide">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<MattrixwvSwitch
-								className="bg-gray-400 data-checked:bg-blue-600"
-								knobClassName="bg-white"
-								size={size}
-								wide={true}
-								offText={<span className="text-black">Off</span>}
-								onText="On"
-							>
-								{size} Switch
-							</MattrixwvSwitch>
-						</div>
-					))
-				}
-			</SwitchDisplay>
-			<SwitchDisplay title="Primary">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<PrimarySwitch
-								size={size}
-							>
-								{size} Switch
-							</PrimarySwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<PrimarySwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</PrimarySwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<PrimarySwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</PrimarySwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Secondary">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<SecondarySwitch
-								size={size}
-							>
-								{size} Switch
-							</SecondarySwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SecondarySwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</SecondarySwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SecondarySwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</SecondarySwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Tertiary">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<TertiarySwitch
-								size={size}
-							>
-								{size} Switch
-							</TertiarySwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<TertiarySwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</TertiarySwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<TertiarySwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</TertiarySwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Success">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<SuccessSwitch
-								size={size}
-							>
-								{size} Switch
-							</SuccessSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SuccessSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</SuccessSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SuccessSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</SuccessSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Warning">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<WarningSwitch
-								size={size}
-							>
-								{size} Switch
-							</WarningSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<WarningSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</WarningSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<WarningSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</WarningSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Danger">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<DangerSwitch
-								size={size}
-							>
-								{size} Switch
-							</DangerSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<DangerSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</DangerSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<DangerSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</DangerSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Dark">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<DarkSwitch
-								size={size}
-							>
-								{size} Switch
-							</DarkSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<DarkSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</DarkSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<DarkSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</DarkSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Light">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<LightSwitch
-								size={size}
-							>
-								{size} Switch
-							</LightSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<LightSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</LightSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<LightSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</LightSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Success Danger">
-				{
-					sizes.map((size) => (
-						<div
-							key={size}
-							className="flex flex-row items-center justify-center gap-x-2"
-						>
-							<SuccessDangerSwitch
-								size={size}
-							>
-								{size} Switch
-							</SuccessDangerSwitch>
-						</div>
-					))
-				}
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SuccessDangerSwitch
-						size="md"
-						disabled={true}
-					>
-						Disabled Switch
-					</SuccessDangerSwitch>
-				</div>
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<SuccessDangerSwitch
-						size="md"
-						disabled={true}
-						checked={true}
-					>
-						Disabled Switch
-					</SuccessDangerSwitch>
-				</div>
-			</SwitchDisplay>
-			<SwitchDisplay title="Button">
-				<div
-					className="flex flex-row items-center justify-center gap-x-2"
-				>
-					<ButtonSwitch
-						className="cursor-pointer"
-						onNode={<Button size="sm" shape="square" className="bg-green-600 border-green-600"><BsCheck size={32}/></Button>}
-						offNode={<Button size="sm" shape="square" className="bg-red-600 border-red-600"><BsX size={32}/></Button>}
-					/>
-				</div>
-			</SwitchDisplay>
-		</div>
-	);
-}
-
-function SwitchDisplay({
-	title,
-	children
-}:{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			<div
-				className="flex flex-row items-center justify-center gap-x-4"
-			>
-				{children}
-			</div>
-		</div>
-	);
-}

src/util/InputUtils.tsx

@@ -0,0 +1,504 @@
+import { Button } from "$/component/button";
+import { OptionInput, SelectInput, TextInput } from "$/component/input";
+import ButtonSwitch from "$/component/input/switch/ButtonSwitch";
+import DangerSwitch from "$/component/input/switch/DangerSwitch";
+import DarkSwitch from "$/component/input/switch/DarkSwitch";
+import LightSwitch from "$/component/input/switch/LightSwitch";
+import MattrixwvSwitch from "$/component/input/switch/MattrixwvSwitch";
+import PrimarySwitch from "$/component/input/switch/PrimarySwitch";
+import SecondarySwitch from "$/component/input/switch/SecondarySwitch";
+import SuccessDangerSwitch from "$/component/input/switch/SuccessDangerSwitch";
+import SuccessSwitch from "$/component/input/switch/SuccessSwitch";
+import TertiarySwitch from "$/component/input/switch/TertiarySwitch";
+import WarningSwitch from "$/component/input/switch/WarningSwitch";
+import TextArea from "$/component/input/TextArea";
+import type { MattrixwvSwitchSize } from "$/types/Input";
+import { useState } from "react";
+import { BsCheck, BsX } from "react-icons/bs";
+
+
+export function SwitchContent(): React.ReactNode{
+	const sizes: MattrixwvSwitchSize[] = [ "xs", "sm", "md", "lg", "xl" ];
+
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-8 mt-8"
+		>
+			<SwitchDisplay title="Basic">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<MattrixwvSwitch
+								className="bg-gray-400 data-checked:bg-blue-600"
+								knobClassName="bg-white"
+								size={size}
+							>
+								{size} Switch
+							</MattrixwvSwitch>
+						</div>
+					))
+				}
+			</SwitchDisplay>
+			<SwitchDisplay title="Wide">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<MattrixwvSwitch
+								className="bg-gray-400 data-checked:bg-blue-600"
+								knobClassName="bg-white"
+								size={size}
+								wide={true}
+								offText={<span className="text-black">Off</span>}
+								onText="On"
+							>
+								{size} Switch
+							</MattrixwvSwitch>
+						</div>
+					))
+				}
+			</SwitchDisplay>
+			<SwitchDisplay title="Primary">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<PrimarySwitch
+								size={size}
+							>
+								{size} Switch
+							</PrimarySwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<PrimarySwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</PrimarySwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<PrimarySwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</PrimarySwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Secondary">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<SecondarySwitch
+								size={size}
+							>
+								{size} Switch
+							</SecondarySwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SecondarySwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</SecondarySwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SecondarySwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</SecondarySwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Tertiary">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<TertiarySwitch
+								size={size}
+							>
+								{size} Switch
+							</TertiarySwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<TertiarySwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</TertiarySwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<TertiarySwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</TertiarySwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Success">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<SuccessSwitch
+								size={size}
+							>
+								{size} Switch
+							</SuccessSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SuccessSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</SuccessSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SuccessSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</SuccessSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Warning">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<WarningSwitch
+								size={size}
+							>
+								{size} Switch
+							</WarningSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<WarningSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</WarningSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<WarningSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</WarningSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Danger">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<DangerSwitch
+								size={size}
+							>
+								{size} Switch
+							</DangerSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<DangerSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</DangerSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<DangerSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</DangerSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Dark">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<DarkSwitch
+								size={size}
+							>
+								{size} Switch
+							</DarkSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<DarkSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</DarkSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<DarkSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</DarkSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Light">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<LightSwitch
+								size={size}
+							>
+								{size} Switch
+							</LightSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<LightSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</LightSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<LightSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</LightSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Success Danger">
+				{
+					sizes.map((size) => (
+						<div
+							key={size}
+							className="flex flex-row items-center justify-center gap-x-2"
+						>
+							<SuccessDangerSwitch
+								size={size}
+							>
+								{size} Switch
+							</SuccessDangerSwitch>
+						</div>
+					))
+				}
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SuccessDangerSwitch
+						size="md"
+						disabled={true}
+					>
+						Disabled Switch
+					</SuccessDangerSwitch>
+				</div>
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<SuccessDangerSwitch
+						size="md"
+						disabled={true}
+						checked={true}
+					>
+						Disabled Switch
+					</SuccessDangerSwitch>
+				</div>
+			</SwitchDisplay>
+			<SwitchDisplay title="Button">
+				<div
+					className="flex flex-row items-center justify-center gap-x-2"
+				>
+					<ButtonSwitch
+						className="cursor-pointer transition-all duration-250"
+						onNode={<Button size="sm" shape="square" className="bg-green-600 border-green-600"><BsCheck size={32}/></Button>}
+						offNode={<Button size="sm" shape="square" className="bg-red-600 border-red-600"><BsX size={32}/></Button>}
+					/>
+				</div>
+			</SwitchDisplay>
+		</div>
+	);
+}
+
+function SwitchDisplay({
+	title,
+	children
+}:{
+	title: React.ReactNode;
+	children: React.ReactNode;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-2"
+		>
+			<h2 className="text-2xl">{title}</h2>
+			<div
+				className="flex flex-row items-center justify-center gap-x-4"
+			>
+				{children}
+			</div>
+		</div>
+	);
+}
+
+export function TextContent(){
+	const selectOptions = [
+		{value: "1", label: "Test 1"},
+		{value: "2", label: "Test 2"},
+		{value: "3", label: "Test 3"},
+		{value: "4", label: "Test 4"},
+		{value: "5", label: "Test 5"},
+		{value: "6", label: "Test 6"},
+		{value: "7", label: "Test 7"},
+		{value: "8", label: "Test 8"},
+		{value: "9", label: "Test 9"},
+		{value: "10", label: "Test 10"},
+		{value: "11", label: "Test 11"},
+		{value: "12", label: "Test 12"},
+		{value: "13", label: "Test 13"},
+		{value: "14", label: "Test 14"},
+		{value: "15", label: "Test 15"},
+		{value: "16", label: "Test 16"},
+		{value: "17", label: "Test 17"},
+		{value: "18", label: "Test 18"},
+		{value: "19", label: "Test 19"}
+	];
+
+	const [ selected, setSelected ] = useState(selectOptions[0]);
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-8 mt-8"
+		>
+			<TextDisplay title="Text Input">
+				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color)"/>
+			</TextDisplay>
+			<TextDisplay title="Text Area">
+				<TextArea placeholder="Textarea" labelClassName="bg-(--bg-color)"/>
+			</TextDisplay>
+			<TextDisplay title="Select">
+				<SelectInput label={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
+					{
+						selectOptions.map((option) => (
+							<OptionInput
+								key={option.value}
+								className="bg-neutral-600 hover:bg-neutral-700"
+								value={option.value}
+								children={option.label}
+							/>
+						))
+					}
+				</SelectInput>
+			</TextDisplay>
+		</div>
+	);
+}
+
+function TextDisplay({
+	title,
+	children
+}:{
+	title: React.ReactNode;
+	children: React.ReactNode;
+}){
+	return (
+		<div
+			className="flex flex-col items-center justify-center gap-y-2 w-full"
+		>
+			<h2 className="text-2xl">{title}</h2>
+			{children}
+		</div>
+	);
+}