Created switches

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:
-    | '/'
-    | '/buttons'
-    | '/input'
-    | '/loading'
-    | '/message'
-    | '/modal'
-    | '/switch'
-    | '/tab'
+  to: '/' | '/buttons' | '/input' | '/loading' | '/message' | '/modal' | '/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>
-}