Created switches

lib/component/input/switch/ButtonSwitch.tsx

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

lib/component/input/switch/DarkSwitch.tsx

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

lib/component/input/switch/LightSwitch.tsx

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

lib/component/input/switch/MattrixwvSwitch.tsx

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

lib/component/input/switch/SecondarySwitch.tsx

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

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,7 +1,30 @@
-export default function SuccessDangerSwitch(){
+import type { MattrixwvSwitchProps } from "$/types/Input";
+import clsx from "clsx";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+export default function SuccessDangerSwitch({
+	className,
+	disabled,
+	...props
+}: MattrixwvSwitchProps){
 	return (
-		<div>
+		<MattrixwvSwitch
-			Success Danger Switch
+			{...props}
-		</div>
+			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(
+				{
+					"bg-white": !disabled,
+					"bg-gray-200": disabled
+				}
+			)}
+			disabled={disabled}
+		/>
 	);
 }

lib/component/input/switch/SuccessSwitch.tsx

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

lib/component/input/switch/WarningSwitch.tsx

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

lib/types/Input.d.ts

@@ -1,3 +1,4 @@
+import type React from "react";
 import type { ChangeEventHandler } from "react";
 
 
@@ -16,7 +17,7 @@ export interface TextInputProps {
 export interface SelectInputProps {
 	label: React.ReactNode;
 	value?: string;
-	onChange?: (newVlaue: string) => void;
+	onChange?: (newValue: string) => void;
 	children: React.ReactNode;
 }
 
@@ -26,3 +27,35 @@ export interface OptionInputProps {
 	value: string;
 	children: React.ReactNode;
 }
+
+export type MattrixwvSwitchSize = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface MattrixwvSwitchProps {
+	id?: string;
+	className?: string;
+	knobClassName?: string;
+	size?: MattrixwvSwitchSize;
+	wide?: boolean;
+	name?: string;
+	value?: string;
+	defaultChecked?: boolean;
+	checked?: boolean;
+	onChange?: (newChecked: boolean) => void;
+	disabled?: boolean;
+	children?: React.ReactNode;
+	offText?: React.ReactNode;
+	onText?: React.ReactNode;
+}
+
+export interface MattrixwvButtonSwitchProps {
+	id?: string;
+	className?: string;
+	name?: string;
+	value?: string;
+	defaultChecked?: boolean;
+	checked?: boolean;
+	onChange?: (newChecked: boolean) => void;
+	disabled?: boolean;
+	onNode: React.ReactNode;
+	offNode: React.ReactNode;
+}

src/routeTree.gen.ts

@@ -11,7 +11,6 @@
 import { Route as rootRouteImport } from './routes/__root'
 import { Route as IndexRouteImport } from './routes/index'
 import { Route as TabIndexRouteImport } from './routes/tab/index'
-import { Route as SwitchIndexRouteImport } from './routes/switch/index'
 import { Route as ModalIndexRouteImport } from './routes/modal/index'
 import { Route as MessageIndexRouteImport } from './routes/message/index'
 import { Route as LoadingIndexRouteImport } from './routes/loading/index'
@@ -28,11 +27,6 @@ const TabIndexRoute = TabIndexRouteImport.update({
   path: '/tab/',
   getParentRoute: () => rootRouteImport,
 } as any)
-const SwitchIndexRoute = SwitchIndexRouteImport.update({
-  id: '/switch/',
-  path: '/switch/',
-  getParentRoute: () => rootRouteImport,
-} as any)
 const ModalIndexRoute = ModalIndexRouteImport.update({
   id: '/modal/',
   path: '/modal/',
@@ -66,7 +60,6 @@ export interface FileRoutesByFullPath {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
-  '/switch': typeof SwitchIndexRoute
   '/tab': typeof TabIndexRoute
 }
 export interface FileRoutesByTo {
@@ -76,7 +69,6 @@ export interface FileRoutesByTo {
   '/loading': typeof LoadingIndexRoute
   '/message': typeof MessageIndexRoute
   '/modal': typeof ModalIndexRoute
-  '/switch': typeof SwitchIndexRoute
   '/tab': typeof TabIndexRoute
 }
 export interface FileRoutesById {
@@ -87,7 +79,6 @@ export interface FileRoutesById {
   '/loading/': typeof LoadingIndexRoute
   '/message/': typeof MessageIndexRoute
   '/modal/': typeof ModalIndexRoute
-  '/switch/': typeof SwitchIndexRoute
   '/tab/': typeof TabIndexRoute
 }
 export interface FileRouteTypes {
@@ -99,18 +90,9 @@ export interface FileRouteTypes {
     | '/loading'
     | '/message'
     | '/modal'
-    | '/switch'
     | '/tab'
   fileRoutesByTo: FileRoutesByTo
-  to:
+  to: '/' | '/buttons' | '/input' | '/loading' | '/message' | '/modal' | '/tab'
-    | '/'
-    | '/buttons'
-    | '/input'
-    | '/loading'
-    | '/message'
-    | '/modal'
-    | '/switch'
-    | '/tab'
   id:
     | '__root__'
     | '/'
@@ -119,7 +101,6 @@ export interface FileRouteTypes {
     | '/loading/'
     | '/message/'
     | '/modal/'
-    | '/switch/'
     | '/tab/'
   fileRoutesById: FileRoutesById
 }
@@ -130,7 +111,6 @@ export interface RootRouteChildren {
   LoadingIndexRoute: typeof LoadingIndexRoute
   MessageIndexRoute: typeof MessageIndexRoute
   ModalIndexRoute: typeof ModalIndexRoute
-  SwitchIndexRoute: typeof SwitchIndexRoute
   TabIndexRoute: typeof TabIndexRoute
 }
 
@@ -150,13 +130,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof TabIndexRouteImport
       parentRoute: typeof rootRouteImport
     }
-    '/switch/': {
-      id: '/switch/'
-      path: '/switch'
-      fullPath: '/switch'
-      preLoaderRoute: typeof SwitchIndexRouteImport
-      parentRoute: typeof rootRouteImport
-    }
     '/modal/': {
       id: '/modal/'
       path: '/modal'
@@ -202,7 +175,6 @@ const rootRouteChildren: RootRouteChildren = {
   LoadingIndexRoute: LoadingIndexRoute,
   MessageIndexRoute: MessageIndexRoute,
   ModalIndexRoute: ModalIndexRoute,
-  SwitchIndexRoute: SwitchIndexRoute,
   TabIndexRoute: TabIndexRoute,
 }
 export const routeTree = rootRouteImport

src/routes/__root.tsx

@@ -11,7 +11,6 @@ const navLinks = [
 	{ to: "/loading", label: "Loading" },
 	{ to: "/message", label: "Message" },
 	{ to: "/modal", label: "Modal" },
-	{ to: "/switch", label: "Switch" },
 	{ to: "/tab", label: "Tab" },
 ];
 

src/routes/input/index.tsx

@@ -1,4 +1,20 @@
-import { createFileRoute } from '@tanstack/react-router';
+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 { createFileRoute } from "@tanstack/react-router";
+import { BsCheck, BsX } from "react-icons/bs";
 
 
 export const Route = createFileRoute('/input/')({
@@ -7,5 +23,433 @@ export const Route = createFileRoute('/input/')({
 
 
 function InputPage(){
-	return <div>Hello "/input/"!</div>
+	const tabs: TabGroupContent[] = [
+		{ tab: "Switch", content: <SwitchContent/> }
+	];
+
+	return (
+		<div
+			className="flex flex-col items-center justify-center"
+		>
+			<MattrixwvTabGroup
+				tabs={tabs}
+			/>
+		</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/routes/switch/index.tsx

@@ -1,11 +0,0 @@
-import { createFileRoute } from '@tanstack/react-router';
-
-
-export const Route = createFileRoute("/switch/")({
-	component: RouteComponent
-});
-
-
-function RouteComponent(){
-	return <div>Hello "/switch/"!</div>
-}