Update themed components with refs and css

lib/component/input/checkbox/DangerCheckbox.tsx

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

lib/component/input/checkbox/DarkCheckbox.tsx

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

lib/component/input/checkbox/InfoCheckbox.tsx

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

lib/component/input/checkbox/LightCheckbox.tsx

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

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,9 +1,10 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import { Checkbox } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function MattrixwvCheckbox({
+const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	id,
 	className,
 	labelClassName,
@@ -16,7 +17,7 @@ export default function MattrixwvCheckbox({
 	strokeWidth = 2,
 	value,
 	children
-}: CheckboxProps){
+}, ref ) => {
 	return (
 		<Checkbox
 			id={id}
@@ -29,6 +30,7 @@ export default function MattrixwvCheckbox({
 			defaultChecked={defaultChecked}
 			onChange={onChange}
 			value={value}
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -49,6 +51,7 @@ export default function MattrixwvCheckbox({
 				<svg
 					viewBox="0 0 14 14"
 					fill="none"
+					aria-label="checkbox"
 				>
 					<path
 						d="M3 8L6 11L11 3.5"
@@ -68,4 +71,8 @@ export default function MattrixwvCheckbox({
 			}
 		</Checkbox>
 	);
-}
+});
+
+MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
+
+export default MattrixwvCheckbox;

lib/component/input/checkbox/MoltenCheckbox.tsx

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

lib/component/input/checkbox/PrimaryCheckbox.tsx

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

lib/component/input/checkbox/SecondaryCheckbox.tsx

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

lib/component/input/checkbox/SuccessCheckbox.tsx

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

lib/component/input/checkbox/TertiaryCheckbox.tsx

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

lib/component/input/checkbox/WarningCheckbox.tsx

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

lib/component/input/radio/DangerRadioButton.tsx

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

lib/component/input/radio/DarkRadioButton.tsx

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

lib/component/input/radio/InfoRadioButton.tsx

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

lib/component/input/radio/LightRadioButton.tsx

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

lib/component/input/radio/MoltenRadioButton.tsx

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

lib/component/input/radio/PrimaryRadioButton.tsx

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

lib/component/input/radio/RadioButton.tsx

@@ -1,21 +1,23 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import { Radio } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 
 
-export default function RadioButton({
+const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	id,
 	className,
 	labelClassName,
 	size = "sm",
 	value,
 	children
-}: RadioButtonProps){
+}, ref ) => {
 	return (
 		<Radio
 			id={id}
 			value={value}
 			className="group flex flex-row items-center justify-center gap-x-2 cursor-pointer"
+			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -41,4 +43,8 @@ export default function RadioButton({
 			}
 		</Radio>
 	);
-}
+});
+
+RadioButton.displayName = "RadioButton";
+
+export default RadioButton;

lib/component/input/radio/RadioList.tsx

@@ -12,7 +12,7 @@ export default function RadioList({
 	defaultValue,
 	direction = "horizontal",
 	children
-}: RadioListProps){
+}: Readonly<RadioListProps>){
 	return (
 		<RadioGroup
 			id={id}

lib/component/input/radio/SecondaryRadioButton.tsx

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

lib/component/input/radio/SuccessRadioButton.tsx

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

lib/component/input/radio/TertiaryRadioButton.tsx

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

lib/component/input/radio/WarningRadioButton.tsx

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

lib/component/input/switch/ButtonSwitch.tsx

@@ -1,8 +1,9 @@
 import type { MattrixwvButtonSwitchProps } from "$/types/InputTypes";
 import { Switch } from "@headlessui/react";
+import { forwardRef } from "react";
 
 
-export default function ButtonSwitch({
+const ButtonSwitch = forwardRef<HTMLButtonElement, MattrixwvButtonSwitchProps>(({
 	id,
 	className,
 	name,
@@ -13,7 +14,7 @@ export default function ButtonSwitch({
 	disabled,
 	onNode,
 	offNode
-}: MattrixwvButtonSwitchProps){
+}, ref ) => {
 	return (
 		<Switch
 			id={id}
@@ -24,6 +25,7 @@ export default function ButtonSwitch({
 			checked={checked}
 			onChange={onChange}
 			disabled={disabled}
+			ref={ref}
 		>
 			{({ checked }) => (
 				<>
@@ -32,4 +34,8 @@ export default function ButtonSwitch({
 			)}
 		</Switch>
 	);
-}
+});
+
+ButtonSwitch.displayName = "ButtonSwitch";
+
+export default ButtonSwitch;

lib/component/input/switch/DangerSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function DangerSwitch({
+const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-red-600": !disabled,
-					"data-checked:bg-red-400/80": disabled
+					"data-checked:bg-danger": !disabled,
+					"data-checked:bg-danger-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DangerSwitch.displayName = "DangerSwitch";
+
+export default DangerSwitch;

lib/component/input/switch/DarkSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function DarkSwitch({
+const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-black": !disabled,
-					"data-checked:bg-neutral-800/80": disabled
+					"data-checked:bg-dark": !disabled,
+					"data-checked:bg-dark-mid/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+DarkSwitch.displayName = "DarkSwitch";
+
+export default DarkSwitch;

lib/component/input/switch/InfoSwitch.tsx

@@ -0,0 +1,39 @@
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}, ref ) => {
+	return (
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-gray-400",
+				className,
+				{
+					"data-checked:bg-info": !disabled,
+					"data-checked:bg-info-light/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-neutral-light": disabled
+				}
+			)}
+			disabled={disabled}
+			ref={ref}
+		/>
+	);
+});
+
+InfoSwitch.displayName = "InfoSwitch";
+
+export default InfoSwitch;

lib/component/input/switch/LightSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function LightSwitch({
+const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-white": !disabled,
-					"data-checked:bg-neutral-300/80": disabled
+					"data-checked:bg-light": !disabled,
+					"data-checked:bg-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-black": !disabled,
-					"bg-neutral-800": disabled
+					"bg-neutral-dark": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+LightSwitch.displayName = "LightSwitch";
+
+export default LightSwitch;

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -1,10 +1,11 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import { Field, Label, Switch } from "@headlessui/react";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import { Fragment } from "react/jsx-runtime";
 
 
-export default function MattrixwvSwitch({
+const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	id,
 	className,
 	knobClassName,
@@ -19,7 +20,7 @@ export default function MattrixwvSwitch({
 	children,
 	offText,
 	onText
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<Field as={Fragment}>
 			<Switch
@@ -53,6 +54,7 @@ export default function MattrixwvSwitch({
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
+				ref={ref}
 			>
 				{
 					offText &&
@@ -105,4 +107,8 @@ export default function MattrixwvSwitch({
 			</Label>
 		</Field>
 	);
-}
+});
+
+MattrixwvSwitch.displayName = "MattrixwvSwitch";
+
+export default MattrixwvSwitch;

lib/component/input/switch/MoltenSwitch.tsx

@@ -0,0 +1,39 @@
+import type { MattrixwvSwitchProps } from "$/types/InputTypes";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import MattrixwvSwitch from "./MattrixwvSwitch";
+
+
+const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+	className,
+	knobClassName,
+	disabled,
+	...props
+}, ref ) => {
+	return (
+		<MattrixwvSwitch
+			{...props}
+			className={clsx(
+				"bg-neutral-mid",
+				className,
+				{
+					"data-checked:bg-molten": !disabled,
+					"data-checked:bg-molten-light/80": disabled
+				}
+			)}
+			knobClassName={clsx(
+				knobClassName,
+				{
+					"bg-white": !disabled,
+					"bg-neutral-light": disabled
+				}
+			)}
+			disabled={disabled}
+			ref={ref}
+		/>
+	);
+});
+
+MoltenSwitch.displayName = "MoltenSwitch";
+
+export default MoltenSwitch;

lib/component/input/switch/PrimarySwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function PrimarySwitch({
+const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-blue-600": !disabled,
-					"data-checked:bg-blue-400/80": disabled
+					"data-checked:bg-primary": !disabled,
+					"data-checked:bg-primary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+PrimarySwitch.displayName = "PrimarySwitch";
+
+export default PrimarySwitch;

lib/component/input/switch/SecondarySwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SecondarySwitch({
+const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-neutral-600": !disabled,
-					"data-checked:bg-neutral-400/80": disabled
+					"data-checked:bg-secondary": !disabled,
+					"data-checked:bg-secondary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SecondarySwitch.displayName = "SecondarySwitch";
+
+export default SecondarySwitch;

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,32 +1,38 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SuccessDangerSwitch({
+const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<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
+					"bg-danger data-checked:bg-success": !disabled,
+					"bg-danger-light/80 data-checked:bg-success-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
+
+export default SuccessDangerSwitch;

lib/component/input/switch/SuccessSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function SuccessSwitch({
+const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-green-600": !disabled,
-					"data-checked:bg-green-400/80": disabled
+					"data-checked:bg-success": !disabled,
+					"data-checked:bg-success-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+SuccessSwitch.displayName = "SuccessSwitch";
+
+export default SuccessSwitch;

lib/component/input/switch/TertiarySwitch.tsx

@@ -1,14 +1,15 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function TertiarySwitch({
+const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
@@ -16,18 +17,23 @@ export default function TertiarySwitch({
 				"bg-gray-400",
 				className,
 				{
-					"data-checked:bg-purple-600": !disabled,
-					"data-checked:bg-purple-400/80": disabled
+					"data-checked:bg-tertiary": !disabled,
+					"data-checked:bg-tertiary-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-200": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+TertiarySwitch.displayName = "TertiarySwitch";
+
+export default TertiarySwitch;

lib/component/input/switch/WarningSwitch.tsx

@@ -1,33 +1,39 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-export default function WarningSwitch({
+const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}: MattrixwvSwitchProps){
+}, ref ) => {
 	return (
 		<MattrixwvSwitch
 			{...props}
 			className={clsx(
-				"bg-gray-400",
+				"bg-neutral-mid",
 				className,
 				{
-					"data-checked:bg-yellow-500": !disabled,
-					"data-checked:bg-yellow-300/80": disabled
+					"data-checked:bg-warning": !disabled,
+					"data-checked:bg-warning-light/80": disabled
 				}
 			)}
 			knobClassName={clsx(
 				knobClassName,
 				{
 					"bg-white": !disabled,
-					"bg-gray-300": disabled
+					"bg-neutral-light": disabled
 				}
 			)}
 			disabled={disabled}
+			ref={ref}
 		/>
 	);
-}
+});
+
+WarningSwitch.displayName = "WarningSwitch";
+
+export default WarningSwitch;