Update import/exports to be more tree-shake friendly

lib/component/button.ts

@@ -1,26 +0,0 @@
-import Button from "./button/Button";
-import DangerButton from "./button/DangerButton";
-import DarkButton from "./button/DarkButton";
-import InfoButton from "./button/InfoButton";
-import LightButton from "./button/LightButton";
-import MoltenButton from "./button/MoltenButton";
-import PrimaryButton from "./button/PrimaryButton";
-import SecondaryButton from "./button/SecondaryButton";
-import SuccessButton from "./button/SuccessButton";
-import TertiaryButton from "./button/TertiaryButton";
-import WarningButton from "./button/WarningButton";
-
-
-export {
-	Button,
-	DangerButton,
-	DarkButton,
-	InfoButton,
-	LightButton,
-	MoltenButton,
-	PrimaryButton,
-	SecondaryButton,
-	SuccessButton,
-	TertiaryButton,
-	WarningButton
-};

lib/component/button/Button.tsx

@@ -1,10 +1,9 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function Button({
 	className,
 	type="button",
 	rounding = "lg",
@@ -13,11 +12,10 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref ) => {
+}: Readonly<ButtonProps>){
 	return (
 		<button
 			data-testid="mattrixwv-button"
-			ref={ref}
 			type={type}
 			disabled={disabled}
 			className={clsx(
@@ -59,8 +57,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-Button.displayName = "Button";
-
-export default Button;
+}

lib/component/button/DangerButton.tsx

@@ -1,20 +1,18 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
 
-const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DangerButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-danger-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -44,8 +42,4 @@ const DangerButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-DangerButton.displayName = "DangerButton";
-
-export default DangerButton;
+}

lib/component/button/DarkButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function DarkButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-dark-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const DarkButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-DarkButton.displayName = "DarkButton";
-
-export default DarkButton;
+}

lib/component/button/InfoButton.tsx

@@ -1,21 +1,19 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function InfoButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-info-button"
 			variant={variant}
 			disabled={disabled}
-			ref={ref}
 			className={clsx(
 				"transition duration-300",
 				className,
@@ -43,8 +41,4 @@ const InfoButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-InfoButton.displayName = "InfoButton";
-
-export default InfoButton;
+}

lib/component/button/LightButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function LightButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-light-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const LightButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-LightButton.displayName = "LightButton";
-
-export default LightButton;
+}

lib/component/button/MoltenButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function MoltenButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-molten-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const MoltenButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-MoltenButton.displayName = "MoltenButton";
-
-export default MoltenButton;
+}

lib/component/button/PrimaryButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function PrimaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-primary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-PrimaryButton.displayName = "PrimaryButton";
-
-export default PrimaryButton;
+}

lib/component/button/SecondaryButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SecondaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-secondary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-SecondaryButton.displayName = "SecondaryButton";
-
-export default SecondaryButton;
+}

lib/component/button/SuccessButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function SuccessButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-success-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const SuccessButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-SuccessButton.displayName = "SuccessButton";
-
-export default SuccessButton;
+}

lib/component/button/TertiaryButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function TertiaryButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-tertiary-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const TertiaryButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-TertiaryButton.displayName = "TertiaryButton";
-
-export default TertiaryButton;
+}

lib/component/button/WarningButton.tsx

@@ -1,19 +1,17 @@
 import type { ButtonProps } from "$/types/ButtonTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import Button from "./Button";
 
 
-const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
+export default function WarningButton({
 	className,
 	variant = "standard",
 	disabled,
 	...buttonProps
-}, ref) => {
+}: Readonly<ButtonProps>){
 	return (
 		<Button
 			data-testid="mattrixwv-warning-button"
-			ref={ref}
 			variant={variant}
 			disabled={disabled}
 			className={clsx(
@@ -43,8 +41,4 @@ const WarningButton = forwardRef<HTMLButtonElement, ButtonProps>(({
 			{...buttonProps}
 		/>
 	);
-});
-
-WarningButton.displayName = "WarningButton";
-
-export default WarningButton;
+}

lib/component/button/index.ts

@@ -0,0 +1,12 @@
+export { default as Button } from "./Button";
+export { default as DangerButton } from "./DangerButton";
+export { default as DarkButton } from "./DarkButton";
+export { default as InfoButton } from "./InfoButton";
+export { default as LightButton } from "./LightButton";
+export { default as MoltenButton } from "./MoltenButton";
+export { default as PrimaryButton } from "./PrimaryButton";
+export { default as SecondaryButton } from "./SecondaryButton";
+export { default as SuccessButton } from "./SuccessButton";
+export { default as TertiaryButton } from "./TertiaryButton";
+export { default as WarningButton } from "./WarningButton";
+

lib/component/checkbox.ts

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

lib/component/input.ts

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

lib/component/input/checkbox/DangerCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function DangerCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const DangerCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-DangerCheckbox.displayName = "DangerCheckbox";
-
-export default DangerCheckbox;
+}

lib/component/input/checkbox/DarkCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function DarkCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const DarkCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-DarkCheckbox.displayName = "DarkCheckbox";
-
-export default DarkCheckbox;
+}

lib/component/input/checkbox/InfoCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function InfoCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const InfoCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-InfoCheckbox.displayName = "InfoCheckbox";
-
-export default InfoCheckbox;
+}

lib/component/input/checkbox/LightCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function LightCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const LightCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-LightCheckbox.displayName = "LightCheckbox";
-
-export default LightCheckbox;
+}

lib/component/input/checkbox/MattrixwvCheckbox.tsx

@@ -1,10 +1,9 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import { Checkbox } from "@headlessui/react";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
-const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function MattrixwvCheckbox({
 	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
@@ -18,7 +17,7 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 	value,
 	disabled,
 	children
-}, ref ) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<Checkbox
 			id={id}
@@ -38,7 +37,6 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			value={value}
 			disabled={disabled}
 			aria-labelledby={`${id}Label`}
-			ref={ref}
 		>
 			{/* Checkbox */}
 			<div
@@ -82,8 +80,4 @@ const MattrixwvCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 			}
 		</Checkbox>
 	);
-});
-
-MattrixwvCheckbox.displayName = "MattrixwvCheckbox";
-
-export default MattrixwvCheckbox;
+}

lib/component/input/checkbox/MoltenCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function MoltenCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const MoltenCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-MoltenCheckbox.displayName = "MoltenCheckbox";
-
-export default MoltenCheckbox;
+}

lib/component/input/checkbox/PrimaryCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function PrimaryCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const PrimaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-PrimaryCheckbox.displayName = "PrimaryCheckbox";
-
-export default PrimaryCheckbox;
+}

lib/component/input/checkbox/SecondaryCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function SecondaryCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const SecondaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SecondaryCheckbox.displayName = "SecondaryCheckbox";
-
-export default SecondaryCheckbox;
+}

lib/component/input/checkbox/SuccessCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function SuccessCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const SuccessCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SuccessCheckbox.displayName = "SuccessCheckbox";
-
-export default SuccessCheckbox;
+}

lib/component/input/checkbox/TertiaryCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function TertiaryCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const TertiaryCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-TertiaryCheckbox.displayName = "TertiaryCheckbox";
-
-export default TertiaryCheckbox;
+}

lib/component/input/checkbox/WarningCheckbox.tsx

@@ -1,14 +1,13 @@
 import type { CheckboxProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvCheckbox from "./MattrixwvCheckbox";
 
 
-const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
+export default function WarningCheckbox({
 	className,
 	showBox = true,
 	...props
-}, ref) => {
+}: Readonly<CheckboxProps>){
 	return (
 		<MattrixwvCheckbox
 			className={clsx(
@@ -19,12 +18,7 @@ const WarningCheckbox = forwardRef<HTMLInputElement, CheckboxProps>(({
 				}
 			)}
 			showBox={showBox}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-WarningCheckbox.displayName = "WarningCheckbox";
-
-export default WarningCheckbox;
+}

lib/component/input/date/DateInput.tsx

@@ -1,26 +1,47 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import { type ChangeEvent } from "react";
 
 
 export default function DateInput({
-	id,
 	className,
-	defaultValue,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	//Used to translate the string from the input to a date for onChange
+	const changeDate = (e: ChangeEvent<HTMLInputElement>) => {
+		const [ year, month, day ] = e.target.value.split("-").map(Number);
+		const newDate = new Date(year, month - 1, day);
+
+		onChange(Number.isNaN(newDate.getTime()) ? undefined : newDate);
+	};
+
+
 	return (
 		<input
 			type="date"
-			id={id}
 			className={clsx(
 				"border rounded-lg px-2 py-1",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DD") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DD") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DD").toDate()))}
+			value={formatDate(value)}
+			onChange={changeDate}
+			{...inputProps}
 		/>
 	);
 }
+
+
+//Used to translate the date to a string for the input
+function formatDate(date: Date | undefined): string{
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+
+	return `${year}-${month}-${day}`;
+}

lib/component/input/date/DateTimeInput.tsx

@@ -1,15 +1,38 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import type { ChangeEvent } from "react";
 
 
 export default function DateTimeInput({
 	id,
 	className,
-	defaultValue,
+	step = 60,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	const changeDateTime = (e: ChangeEvent<HTMLInputElement>) => {
+		const match = new RegExp(/^(\d+)-(\d+)-(\d+)T(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
+
+		if(!match){
+			onChange(undefined);
+			return;
+		}
+
+		const [ ,
+			y, mo, d,
+			h, mi, s = "0", ms = "0"
+		] = match;
+
+		const date = new Date(
+			Number(y), Number(mo) - 1, Number(d),
+			Number(h), Number(mi), Number(s), Number(ms)
+		);
+
+		onChange(Number.isNaN(date.getTime()) ? undefined : date);
+	}
+
+
 	return (
 		<input
 			type="datetime-local"
@@ -18,9 +41,28 @@ export default function DateTimeInput({
 				"border rounded-lg px-2 py-1 outline-none",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+			value={formatDateTime(value)}
+			onChange={changeDateTime}
+			step={step}
+			{...inputProps}
 		/>
 	);
 }
+
+
+function formatDateTime(date: Date | undefined){
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const y = date.getFullYear();
+	const mo = String(date.getMonth() + 1).padStart(2, "0");
+	const d = String(date.getDate()).padStart(2, "0");
+
+	const h = String(date.getHours()).padStart(2, "0");
+	const mi = String(date.getMinutes()).padStart(2, "0");
+	const s = String(date.getSeconds()).padStart(2, "0");
+	const ms = String(date.getMilliseconds()).padStart(2, "0");
+
+	return `${y}-${mo}-${d}T${h}:${mi}:${s}.${ms}`;
+}

lib/component/input/date/TimeInput.tsx

@@ -1,15 +1,33 @@
 import type { DateInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import moment from "moment";
+import type { ChangeEvent } from "react";
 
 
 export default function TimeInput({
 	id,
 	className,
-	defaultValue,
+	step = 60,
 	value,
-	onChange
-}: DateInputProps){
+	onChange,
+	...inputProps
+}: Readonly<DateInputProps>){
+	const changeTime = (e: ChangeEvent<HTMLInputElement>) => {
+		const match = new RegExp(/^(\d+):(\d+)(?::(\d+)(?:\.(\d+))?)?$/).exec(e.target.value);
+
+		if(!match){
+			onChange(undefined);
+			return;
+		}
+
+		const [ , h, m, s = "0", ms = "0"] = match;
+
+		const newDate = new Date();
+		newDate.setHours(Number(h), Number(m), Number(s), Number(ms));
+
+		onChange(Number.isNaN(newDate) ? undefined : newDate);
+	}
+
+
 	return (
 		<input
 			type="time"
@@ -18,9 +36,32 @@ export default function TimeInput({
 				"border rounded-lg px-2 py-1 outline-none",
 				className
 			)}
-			defaultValue={defaultValue ? moment(defaultValue).format("YYYY-MM-DDTHH:mm") : undefined}
-			value={value ? moment(value).format("YYYY-MM-DDTHH:mm") : undefined}
-			onChange={(e) => onChange?.(new Date(moment(e.target.value, "YYYY-MM-DDTHH:mm").toDate()))}
+			value={formatTime(value, step)}
+			onChange={changeTime}
+			step={step}
+			{...inputProps}
 		/>
 	);
 }
+
+
+function formatTime(date: Date | undefined, step: number){
+	if(!date || Number.isNaN(date.getTime())){
+		return "";
+	}
+
+	const h = String(date.getHours()).padStart(2, "0");
+	const m = String(date.getMinutes()).padStart(2, "0");
+	const s = String(date.getSeconds()).padStart(2, "0");
+	const ms = String(date.getMilliseconds()).padStart(3, "0");
+
+	let time = `${h}:${m}`;
+	if(step < 60){
+		time += `:${s}`;
+	}
+	if(step < 1){
+		time += `.${ms}`;
+	}
+
+	return time;
+}

lib/component/input/index.ts

@@ -0,0 +1,53 @@
+//? Checkboxes
+export { default as DangerCheckbox } from "./checkbox/DangerCheckbox";
+export { default as DarkCheckbox } from "./checkbox/DarkCheckbox";
+export { default as InfoCheckbox } from "./checkbox/InfoCheckbox";
+export { default as LightCheckbox } from "./checkbox/LightCheckbox";
+export { default as MattrixwvCheckbox } from "./checkbox/MattrixwvCheckbox";
+export { default as MoltenCheckbox } from "./checkbox/MoltenCheckbox";
+export { default as PrimaryCheckbox } from "./checkbox/PrimaryCheckbox";
+export { default as SecondaryCheckbox } from "./checkbox/SecondaryCheckbox";
+export { default as SuccessCheckbox } from "./checkbox/SuccessCheckbox";
+export { default as TertiaryCheckbox } from "./checkbox/TertiaryCheckbox";
+export { default as WarningCheckbox } from "./checkbox/WarningCheckbox";
+
+//? Radio Buttons
+export { default as DangerRadioButton } from "./radio/DangerRadioButton";
+export { default as DarkRadioButton } from "./radio/DarkRadioButton";
+export { default as InfoRadioButton } from "./radio/InfoRadioButton";
+export { default as LightRadioButton } from "./radio/LightRadioButton";
+export { default as MoltenRadioButton } from "./radio/MoltenRadioButton";
+export { default as PrimaryRadioButton } from "./radio/PrimaryRadioButton";
+export { default as RadioButton } from "./radio/RadioButton";
+export { default as RadioList } from "./radio/RadioList";
+export { default as SecondaryRadioButton } from "./radio/SecondaryRadioButton";
+export { default as SuccessRadioButton } from "./radio/SuccessRadioButton";
+export { default as TertiaryRadioButton } from "./radio/TertiaryRadioButton";
+export { default as WarningRadioButton } from "./radio/WarningRadioButton";
+
+//? Switches
+export { default as ButtonSwitch } from "./switch/ButtonSwitch";
+export { default as DangerSwitch } from "./switch/DangerSwitch";
+export { default as DarkSwitch } from "./switch/DarkSwitch";
+export { default as LightSwitch } from "./switch/LightSwitch";
+export { default as MattrixwvSwitch } from "./switch/MattrixwvSwitch";
+export { default as PrimarySwitch } from "./switch/PrimarySwitch";
+export { default as SecondarySwitch } from "./switch/SecondarySwitch";
+export { default as SuccessDangerSwitch } from "./switch/SuccessDangerSwitch";
+export { default as SuccessSwitch } from "./switch/SuccessSwitch";
+export { default as TertiarySwitch } from "./switch/TertiarySwitch";
+export { default as WarningSwitch } from "./switch/WarningSwitch";
+
+
+//? Other imports
+export { default as DateInput } from "./date/DateInput";
+export { default as DateTimeInput } from "./date/DateTimeInput";
+export { default as TimeInput } from "./date/TimeInput";
+export { default as DragAndDropFileInput } from "./file/DragAndDropFileInput";
+export { default as FileInput } from "./file/FileInput";
+export { default as NumberInput } from "./number/NumberInput";
+export { default as OptionInput } from "./text/OptionInput";
+export { default as SelectInput } from "./text/SelectInput";
+export { default as TextArea } from "./text/TextArea";
+export { default as TextInput } from "./text/TextInput";
+

lib/component/input/radio/DangerRadioButton.tsx

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

lib/component/input/radio/DarkRadioButton.tsx

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

lib/component/input/radio/InfoRadioButton.tsx

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

lib/component/input/radio/MoltenRadioButton.tsx

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

lib/component/input/radio/PrimaryRadioButton.tsx

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

lib/component/input/radio/RadioButton.tsx

@@ -1,10 +1,9 @@
 import type { RadioButtonProps } from "$/types/InputTypes";
 import { Radio } from "@headlessui/react";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
-const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
+export default function RadioButton({
 	id = crypto.randomUUID().replaceAll("-", ""),
 	className,
 	labelClassName,
@@ -12,7 +11,7 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 	value,
 	disabled,
 	children
-}, ref ) => {
+}: Readonly<RadioButtonProps>){
 	return (
 		<Radio
 			id={id}
@@ -28,7 +27,6 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 			)}
 			disabled={disabled}
 			aria-labelledby={`${id}Label`}
-			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -55,8 +53,4 @@ const RadioButton = forwardRef<HTMLInputElement, RadioButtonProps>(({
 			}
 		</Radio>
 	);
-});
-
-RadioButton.displayName = "RadioButton";
-
-export default RadioButton;
+}

lib/component/input/radio/SecondaryRadioButton.tsx

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

lib/component/input/radio/SuccessRadioButton.tsx

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

lib/component/input/radio/WarningRadioButton.tsx

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

lib/component/input/switch/ButtonSwitch.tsx

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

lib/component/input/switch/DangerSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function DangerSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const DangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-DangerSwitch.displayName = "DangerSwitch";
-
-export default DangerSwitch;
+}

lib/component/input/switch/DarkSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function DarkSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const DarkSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-DarkSwitch.displayName = "DarkSwitch";
-
-export default DarkSwitch;
+}

lib/component/input/switch/InfoSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function InfoSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const InfoSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-InfoSwitch.displayName = "InfoSwitch";
-
-export default InfoSwitch;
+}

lib/component/input/switch/LightSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function LightSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const LightSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-LightSwitch.displayName = "LightSwitch";
-
-export default LightSwitch;
+}

lib/component/input/switch/MattrixwvSwitch.tsx

@@ -1,11 +1,10 @@
 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";
 
 
-const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function MattrixwvSwitch({
 	id,
 	className,
 	knobClassName,
@@ -20,7 +19,7 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 	children,
 	offText,
 	onText
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<Field as={Fragment}>
 			<Switch
@@ -54,7 +53,6 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				checked={checked}
 				onChange={onChange}
 				disabled={disabled}
-				ref={ref}
 			>
 				{
 					offText &&
@@ -107,8 +105,4 @@ const MattrixwvSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 			</Label>
 		</Field>
 	);
-});
-
-MattrixwvSwitch.displayName = "MattrixwvSwitch";
-
-export default MattrixwvSwitch;
+}

lib/component/input/switch/MoltenSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function MoltenSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const MoltenSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-MoltenSwitch.displayName = "MoltenSwitch";
-
-export default MoltenSwitch;
+}

lib/component/input/switch/PrimarySwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function PrimarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const PrimarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-PrimarySwitch.displayName = "PrimarySwitch";
-
-export default PrimarySwitch;
+}

lib/component/input/switch/SecondarySwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SecondarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const SecondarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SecondarySwitch.displayName = "SecondarySwitch";
-
-export default SecondarySwitch;
+}

lib/component/input/switch/SuccessDangerSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SuccessDangerSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -27,12 +26,7 @@ const SuccessDangerSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SuccessDangerSwitch.displayName = "SuccessDangerSwitch";
-
-export default SuccessDangerSwitch;
+}

lib/component/input/switch/SuccessSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function SuccessSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const SuccessSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SuccessSwitch.displayName = "SuccessSwitch";
-
-export default SuccessSwitch;
+}

lib/component/input/switch/TertiarySwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function TertiarySwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const TertiarySwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-TertiarySwitch.displayName = "TertiarySwitch";
-
-export default TertiarySwitch;
+}

lib/component/input/switch/WarningSwitch.tsx

@@ -1,15 +1,14 @@
 import type { MattrixwvSwitchProps } from "$/types/InputTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MattrixwvSwitch from "./MattrixwvSwitch";
 
 
-const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
+export default function WarningSwitch({
 	className,
 	knobClassName,
 	disabled,
 	...props
-}, ref ) => {
+}: Readonly<MattrixwvSwitchProps>){
 	return (
 		<MattrixwvSwitch
 			className={clsx(
@@ -28,12 +27,7 @@ const WarningSwitch = forwardRef<HTMLButtonElement, MattrixwvSwitchProps>(({
 				}
 			)}
 			disabled={disabled}
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-WarningSwitch.displayName = "WarningSwitch";
-
-export default WarningSwitch;
+}

lib/component/loading.ts

@@ -1,90 +0,0 @@
-
-import CenterGrowingBars from "./loading/bar/CenterGrowingBars";
-import CircleBars from "./loading/bar/CircleBars";
-import FadingBars from "./loading/bar/FadingBars";
-import FadingGrowingBars from "./loading/bar/FadingGrowingBars";
-import GrowingBars from "./loading/bar/GrowingBars";
-import PulsingBlocks from "./loading/block/PulsingBlocks";
-import SlidingBlocks2 from "./loading/block/SlidingBlocks2";
-import SlidingBlocks3 from "./loading/block/SlidingBlocks3";
-import WaveBlocks from "./loading/block/WaveBlocks";
-import BouncingDots from "./loading/dot/BouncingDots";
-import CircleCenterDots from "./loading/dot/CircleCenterDots";
-import CircleFadingDots from "./loading/dot/CircleFadingDots";
-import CirclePulsingDots from "./loading/dot/CirclePulsingDots";
-import CircleRotatingDots from "./loading/dot/CircleRotatingDots";
-import CircleShrinkingDots from "./loading/dot/CircleShrinkingDots";
-import CircleSpinningDot from "./loading/dot/CircleSpinningDot";
-import CyclingDots from "./loading/dot/CyclingDots";
-import FadingDots from "./loading/dot/FadingDots";
-import PulsingDots from "./loading/dot/PulsingDots";
-import RotatingDots from "./loading/dot/RotatingDots";
-import SwellingDots from "./loading/dot/SwellingDots";
-import DoubleDrop from "./loading/drop/DoubleDrop";
-import DoubleWaveDrop from "./loading/drop/DoubleWaveDrop";
-import Drop from "./loading/drop/Drop";
-import QuickDrop from "./loading/drop/QuickDrop";
-import QuickWaveDrop from "./loading/drop/QuickWaveDrop";
-import TripleDrop from "./loading/drop/TripleDrop";
-import TripleWaveDrop from "./loading/drop/TripleWaveDrop";
-import WaveDrop from "./loading/drop/WaveDrop";
-import HalfSpinner from "./loading/spinner/HalfSpinner";
-import QuarterSpinner from "./loading/spinner/QuarterSpinner";
-import RubberSpinner from "./loading/spinner/RubberSpinner";
-import ThreeQuarterSpinner from "./loading/spinner/ThreeQuarterSpinner";
-import BouncingDot from "./loading/various/BouncingDot";
-import PulsingLine from "./loading/various/PulsingLine";
-import SpinningBinary from "./loading/various/SpinningBinary";
-import SpinningClock from "./loading/various/SpinningClock";
-import SpinningEclipse from "./loading/various/SpinningEclipse";
-import SpinningEclipseHalf from "./loading/various/SpinningEclipseHalf";
-import SpinningGalaxy from "./loading/various/SpinningGalaxy";
-import SpinningTadpole from "./loading/various/SpinningTadpole";
-import Wifi from "./loading/various/Wifi";
-
-
-export {
-	BouncingDot,
-	BouncingDots,
-	CenterGrowingBars,
-	CircleBars,
-	CircleCenterDots,
-	CircleFadingDots,
-	CirclePulsingDots,
-	CircleRotatingDots,
-	CircleShrinkingDots,
-	CircleSpinningDot,
-	CyclingDots,
-	DoubleDrop,
-	DoubleWaveDrop,
-	Drop,
-	FadingBars,
-	FadingDots,
-	FadingGrowingBars,
-	GrowingBars,
-	HalfSpinner,
-	PulsingBlocks,
-	PulsingDots,
-	PulsingLine,
-	QuarterSpinner,
-	QuickDrop,
-	QuickWaveDrop,
-	RotatingDots,
-	RubberSpinner,
-	SlidingBlocks2,
-	SlidingBlocks3,
-	SpinningBinary,
-	SpinningClock,
-	SpinningEclipse,
-	SpinningEclipseHalf,
-	SpinningGalaxy,
-	SpinningTadpole,
-	SwellingDots,
-	ThreeQuarterSpinner,
-	TripleDrop,
-	TripleWaveDrop,
-	WaveBlocks,
-	WaveDrop,
-	Wifi
-};
-

lib/component/loading/index.ts

@@ -0,0 +1,44 @@
+
+export { default as CenterGrowingBars } from "./bar/CenterGrowingBars";
+export { default as CircleBars } from "./bar/CircleBars";
+export { default as FadingBars } from "./bar/FadingBars";
+export { default as FadingGrowingBars } from "./bar/FadingGrowingBars";
+export { default as GrowingBars } from "./bar/GrowingBars";
+export { default as PulsingBlocks } from "./block/PulsingBlocks";
+export { default as SlidingBlocks2 } from "./block/SlidingBlocks2";
+export { default as SlidingBlocks3 } from "./block/SlidingBlocks3";
+export { default as WaveBlocks } from "./block/WaveBlocks";
+export { default as BouncingDots } from "./dot/BouncingDots";
+export { default as CircleCenterDots } from "./dot/CircleCenterDots";
+export { default as CircleFadingDots } from "./dot/CircleFadingDots";
+export { default as CirclePulsingDots } from "./dot/CirclePulsingDots";
+export { default as CircleRotatingDots } from "./dot/CircleRotatingDots";
+export { default as CircleShrinkingDots } from "./dot/CircleShrinkingDots";
+export { default as CircleSpinningDot } from "./dot/CircleSpinningDot";
+export { default as CyclingDots } from "./dot/CyclingDots";
+export { default as FadingDots } from "./dot/FadingDots";
+export { default as PulsingDots } from "./dot/PulsingDots";
+export { default as RotatingDots } from "./dot/RotatingDots";
+export { default as SwellingDots } from "./dot/SwellingDots";
+export { default as DoubleDrop } from "./drop/DoubleDrop";
+export { default as DoubleWaveDrop } from "./drop/DoubleWaveDrop";
+export { default as Drop } from "./drop/Drop";
+export { default as QuickDrop } from "./drop/QuickDrop";
+export { default as QuickWaveDrop } from "./drop/QuickWaveDrop";
+export { default as TripleDrop } from "./drop/TripleDrop";
+export { default as TripleWaveDrop } from "./drop/TripleWaveDrop";
+export { default as WaveDrop } from "./drop/WaveDrop";
+export { default as HalfSpinner } from "./spinner/HalfSpinner";
+export { default as QuarterSpinner } from "./spinner/QuarterSpinner";
+export { default as RubberSpinner } from "./spinner/RubberSpinner";
+export { default as ThreeQuarterSpinner } from "./spinner/ThreeQuarterSpinner";
+export { default as BouncingDot } from "./various/BouncingDot";
+export { default as PulsingLine } from "./various/PulsingLine";
+export { default as SpinningBinary } from "./various/SpinningBinary";
+export { default as SpinningClock } from "./various/SpinningClock";
+export { default as SpinningEclipse } from "./various/SpinningEclipse";
+export { default as SpinningEclipseHalf } from "./various/SpinningEclipseHalf";
+export { default as SpinningGalaxy } from "./various/SpinningGalaxy";
+export { default as SpinningTadpole } from "./various/SpinningTadpole";
+export { default as Wifi } from "./various/Wifi";
+

lib/component/message.ts

@@ -1,26 +0,0 @@
-import DangerMessageBlock from "./message/DangerMessageBlock";
-import DarkMessageBlock from "./message/DarkMessageBlock";
-import InfoMessageBlock from "./message/InfoMessageBlock";
-import LightMessageBlock from "./message/LightMessageBlock";
-import MessageBlock from "./message/MessageBlock";
-import MoltenMessageBlock from "./message/MoltenMessageBlock";
-import PrimaryMessageBlock from "./message/PrimaryMessageBlock";
-import SecondaryMessageBlock from "./message/SecondaryMessageBlock";
-import SuccessMessageBlock from "./message/SuccessMessageBlock";
-import TertiaryMessageBlock from "./message/TertiaryMessageBlock";
-import WarningMessageBlock from "./message/WarningMessageBlock";
-
-
-export {
-	DangerMessageBlock,
-	DarkMessageBlock,
-	InfoMessageBlock,
-	LightMessageBlock,
-	MessageBlock,
-	MoltenMessageBlock,
-	PrimaryMessageBlock,
-	SecondaryMessageBlock,
-	SuccessMessageBlock,
-	TertiaryMessageBlock,
-	WarningMessageBlock
-};

lib/component/message/DangerMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function DangerMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-danger-message-block"
@@ -15,12 +14,7 @@ const DangerMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-danger-xlight text-danger-dark"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-DangerMessageBlock.displayName = "DangerMessageBlock";
-
-export default DangerMessageBlock;
+}

lib/component/message/DarkMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function DarkMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-dark-message-block"
@@ -15,12 +14,7 @@ const DarkMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-dark text-dark-xlight"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-DarkMessageBlock.displayName = "DarkMessageBlock";
-
-export default DarkMessageBlock;
+}

lib/component/message/InfoMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function InfoMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-info-message-block"
@@ -15,12 +14,7 @@ const InfoMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-info-xlight text-info-xdark"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-InfoMessageBlock.displayName = "InfoMessageBlock";
-
-export default InfoMessageBlock;
+}

lib/component/message/LightMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function LightMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-light-message-block"
@@ -15,12 +14,7 @@ const LightMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-white text-black"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-LightMessageBlock.displayName = "LightMessageBlock";
-
-export default LightMessageBlock;
+}

lib/component/message/MessageBlock.tsx

@@ -1,14 +1,13 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 
 
-const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function MessageBlock({
 	className,
 	outline = "sm",
 	rounded = "lg",
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<div
 			data-testid="mattrixwv-message-block"
@@ -30,12 +29,7 @@ const MessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 					"rounded-xl": rounded === "xl"
 				}
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-MessageBlock.displayName = "MessageBlock";
-
-export default MessageBlock;
+}

lib/component/message/MoltenMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function MoltenMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-molten-message-block"
@@ -15,12 +14,7 @@ const MoltenMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-molten-xlight text-molten-mid"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-MoltenMessageBlock.displayName = "MoltenMessageBlock";
-
-export default MoltenMessageBlock;
+}

lib/component/message/PrimaryMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function PrimaryMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-primary-message-block"
@@ -15,12 +14,7 @@ const PrimaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-primary-xlight text-primary-dark"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-PrimaryMessageBlock.displayName = "PrimaryMessageBlock";
-
-export default PrimaryMessageBlock;
+}

lib/component/message/SecondaryMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function SecondaryMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-secondary-message-block"
@@ -15,12 +14,7 @@ const SecondaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-secondary-xlight text-secondary-mid"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-SecondaryMessageBlock.displayName = "SecondaryMessageBlock";
-
-export default SecondaryMessageBlock;
+}

lib/component/message/SuccessMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function SuccessMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-success-message-block"
@@ -15,12 +14,7 @@ const SuccessMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-success-xlight text-success-mid"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-SuccessMessageBlock.displayName = "SuccessMessageBlock";
-
-export default SuccessMessageBlock;
+}

lib/component/message/TertiaryMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function TertiaryMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-tertiary-message-block"
@@ -15,12 +14,7 @@ const TertiaryMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-tertiary-xlight text-tertiary-mid"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-TertiaryMessageBlock.displayName = "TertiaryMessageBlock";
-
-export default TertiaryMessageBlock;
+}

lib/component/message/WarningMessageBlock.tsx

@@ -1,13 +1,12 @@
 import type { MessageBlockProps } from "$/types/MessageTypes";
 import clsx from "clsx";
-import { forwardRef } from "react";
 import MessageBlock from "./MessageBlock";
 
 
-const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
+export default function WarningMessageBlock({
 	className,
 	...messageProps
-}, ref ) => {
+}: Readonly<MessageBlockProps>){
 	return (
 		<MessageBlock
 			data-testid="mattrixwv-warning-message-block"
@@ -15,12 +14,7 @@ const WarningMessageBlock = forwardRef<HTMLDivElement, MessageBlockProps>(({
 				className,
 				"bg-warning-xlight text-warning-dark"
 			)}
-			ref={ref}
 			{...messageProps}
 		/>
 	);
-});
-
-WarningMessageBlock.displayName = "WarningMessageBlock";
-
-export default WarningMessageBlock;
+}

lib/component/message/index.ts

@@ -0,0 +1,12 @@
+export { default as DangerMessageBlock } from "./DangerMessageBlock";
+export { default as DarkMessageBlock } from "./DarkMessageBlock";
+export { default as InfoMessageBlock } from "./InfoMessageBlock";
+export { default as LightMessageBlock } from "./LightMessageBlock";
+export { default as MessageBlock } from "./MessageBlock";
+export { default as MoltenMessageBlock } from "./MoltenMessageBlock";
+export { default as PrimaryMessageBlock } from "./PrimaryMessageBlock";
+export { default as SecondaryMessageBlock } from "./SecondaryMessageBlock";
+export { default as SuccessMessageBlock } from "./SuccessMessageBlock";
+export { default as TertiaryMessageBlock } from "./TertiaryMessageBlock";
+export { default as WarningMessageBlock } from "./WarningMessageBlock";
+

lib/component/modal.ts

@@ -1,13 +0,0 @@
-import Modal from "./modal/Modal";
-import ModalBody from "./modal/ModalBody";
-import ModalFooter from "./modal/ModalFooter";
-import ModalHeader from "./modal/ModalHeader";
-
-
-export {
-	Modal,
-	ModalBody,
-	ModalFooter,
-	ModalHeader
-};
-

lib/component/modal/index.ts

@@ -0,0 +1,5 @@
+export { default as Modal } from "./Modal";
+export { default as ModalBody } from "./ModalBody";
+export { default as ModalFooter } from "./ModalFooter";
+export { default as ModalHeader } from "./ModalHeader";
+

lib/component/nav.ts

@@ -1,10 +0,0 @@
-import DarkModeSwitch from "./nav/DarkModeSwitch";
-import NavBar from "./nav/NavBar";
-import PopoverMenu from "./nav/PopoverMenu";
-
-
-export {
-	DarkModeSwitch,
-	NavBar,
-	PopoverMenu
-};

lib/component/nav/index.ts

@@ -0,0 +1,4 @@
+export { default as DarkModeSwitch } from "./DarkModeSwitch";
+export { default as NavBar } from "./NavBar";
+export { default as PopoverMenu } from "./PopoverMenu";
+

lib/component/progress.ts

@@ -1,26 +0,0 @@
-import DangerProgress from "./progress/DangerProgress";
-import DarkProgress from "./progress/DarkProgress";
-import InfoProgress from "./progress/InfoProgress";
-import LightProgress from "./progress/LightProgress";
-import MoltenProgress from "./progress/MoltenProgress";
-import PrimaryProgress from "./progress/PrimaryProgress";
-import Progress from "./progress/Progress";
-import SecondaryProgress from "./progress/SecondaryProgress";
-import SuccessProgress from "./progress/SuccessProgress";
-import TertiaryProgress from "./progress/TertiaryProgress";
-import WarningProgress from "./progress/WarningProgress";
-
-
-export {
-	DangerProgress,
-	DarkProgress,
-	InfoProgress,
-	LightProgress,
-	MoltenProgress,
-	PrimaryProgress,
-	Progress,
-	SecondaryProgress,
-	SuccessProgress,
-	TertiaryProgress,
-	WarningProgress
-};

lib/component/progress/DangerProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const DangerProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function DangerProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-danger)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-DangerProgress.displayName = "DangerProgress";
-
-export default DangerProgress;
+}

lib/component/progress/DarkProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const DarkProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function DarkProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-dark)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-DarkProgress.displayName = "DarkProgress";
-
-export default DarkProgress;
+}

lib/component/progress/InfoProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const InfoProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function InfoProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-info)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-InfoProgress.displayName = "InfoProgress";
-
-export default InfoProgress;
+}

lib/component/progress/LightProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const LightProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function LightProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-dark)"
 			progressColor="var(--color-light)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-LightProgress.displayName = "LightProgress";
-
-export default LightProgress;
+}

lib/component/progress/MoltenProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const MoltenProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function MoltenProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-molten)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-MoltenProgress.displayName = "MoltenProgress";
-
-export default MoltenProgress;
+}

lib/component/progress/PrimaryProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const PrimaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function PrimaryProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-primary)"
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-PrimaryProgress.displayName = "PrimaryProgress";
-
-export default PrimaryProgress;
+}

lib/component/progress/Progress.tsx

@@ -1,9 +1,9 @@
 import type { ProgressProps } from "$/types/ProgressTypes";
 import clsx from "clsx";
-import { forwardRef, useMemo } from "react";
+import { useMemo } from "react";
 
 
-const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
+export default function Progress({
 	id,
 	className,
 	value,
@@ -15,7 +15,7 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
 	tabIndex,
 	progressColor,
 	backgroundColor
-}, ref ) => {
+}: Readonly<ProgressProps>){
 	const percentage = useMemo(() => {
 		const num = !value || Number.isNaN(value) ? min : Math.max(value, min);
 		const den = (!value || Number.isNaN(value) ? max : Math.max(value, max)) - min;
@@ -55,7 +55,6 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
 			aria-valuenow={value ? Math.round(value * 10000) / 100 : undefined}
 			aria-label={label}
 			tabIndex={tabIndex ?? 0}
-			ref={ref}
 		>
 			<div
 				className={clsx(
@@ -77,8 +76,4 @@ const Progress = forwardRef<HTMLDivElement, ProgressProps>(({
 			/>
 		</div>
 	);
-});
-
-Progress.displayName = "Progress";
-
-export default Progress;
+}

lib/component/progress/SecondaryProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const SecondaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function SecondaryProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-gray-300)"
 			progressColor="var(--color-neutral-500)"
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-SecondaryProgress.displayName = "SecondaryProgress";
-
-export default SecondaryProgress;
+}

lib/component/progress/SuccessProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const SuccessProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function SuccessProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-success)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-SuccessProgress.displayName = "SuccessProgress";
-
-export default SuccessProgress;
+}

lib/component/progress/TertiaryProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const TertiaryProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function TertiaryProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-tertiary)"
 			{...props}
-			ref={ref}
 		/>
 	);
-});
-
-TertiaryProgress.displayName = "TertiaryProgress";
-
-export default TertiaryProgress;
+}

lib/component/progress/WarningProgress.tsx

@@ -1,21 +1,15 @@
 import type { ThemedProgressProps } from "$/types/ProgressTypes";
-import { forwardRef } from "react";
 import Progress from "./Progress";
 
 
-const WarningProgress = forwardRef<HTMLDivElement, ThemedProgressProps>(({
+export default function WarningProgress({
 	...props
-}, ref ) => {
+}: Readonly<ThemedProgressProps>){
 	return (
 		<Progress
 			backgroundColor="var(--color-neutral)"
 			progressColor="var(--color-warning)"
-			ref={ref}
 			{...props}
 		/>
 	);
-});
-
-WarningProgress.displayName = "WarningProgress";
-
-export default WarningProgress;
+}

lib/component/progress/index.ts

@@ -0,0 +1,12 @@
+export { default as DangerProgress } from "./DangerProgress";
+export { default as DarkProgress } from "./DarkProgress";
+export { default as InfoProgress } from "./InfoProgress";
+export { default as LightProgress } from "./LightProgress";
+export { default as MoltenProgress } from "./MoltenProgress";
+export { default as PrimaryProgress } from "./PrimaryProgress";
+export { default as Progress } from "./Progress";
+export { default as SecondaryProgress } from "./SecondaryProgress";
+export { default as SuccessProgress } from "./SuccessProgress";
+export { default as TertiaryProgress } from "./TertiaryProgress";
+export { default as WarningProgress } from "./WarningProgress";
+

lib/component/radio.ts

@@ -1,28 +0,0 @@
-import DangerRadioButton from "./input/radio/DangerRadioButton";
-import DarkRadioButton from "./input/radio/DarkRadioButton";
-import InfoRadioButton from "./input/radio/InfoRadioButton";
-import LightRadioButton from "./input/radio/LightRadioButton";
-import MoltenRadioButton from "./input/radio/MoltenRadioButton";
-import PrimaryRadioButton from "./input/radio/PrimaryRadioButton";
-import RadioButton from "./input/radio/RadioButton";
-import RadioList from "./input/radio/RadioList";
-import SecondaryRadioButton from "./input/radio/SecondaryRadioButton";
-import SuccessRadioButton from "./input/radio/SuccessRadioButton";
-import TertiaryRadioButton from "./input/radio/TertiaryRadioButton";
-import WarningRadioButton from "./input/radio/WarningRadioButton";
-
-
-export {
-	DangerRadioButton,
-	DarkRadioButton,
-	InfoRadioButton,
-	LightRadioButton,
-	MoltenRadioButton,
-	PrimaryRadioButton,
-	RadioButton,
-	RadioList,
-	SecondaryRadioButton,
-	SuccessRadioButton,
-	TertiaryRadioButton,
-	WarningRadioButton
-};

lib/component/switch.ts

@@ -1,26 +0,0 @@
-import ButtonSwitch from "./input/switch/ButtonSwitch";
-import DangerSwitch from "./input/switch/DangerSwitch";
-import DarkSwitch from "./input/switch/DarkSwitch";
-import LightSwitch from "./input/switch/LightSwitch";
-import MattrixwvSwitch from "./input/switch/MattrixwvSwitch";
-import PrimarySwitch from "./input/switch/PrimarySwitch";
-import SecondarySwitch from "./input/switch/SecondarySwitch";
-import SuccessDangerSwitch from "./input/switch/SuccessDangerSwitch";
-import SuccessSwitch from "./input/switch/SuccessSwitch";
-import TertiarySwitch from "./input/switch/TertiarySwitch";
-import WarningSwitch from "./input/switch/WarningSwitch";
-
-
-export {
-	ButtonSwitch,
-	DangerSwitch,
-	DarkSwitch,
-	LightSwitch,
-	MattrixwvSwitch,
-	PrimarySwitch,
-	SecondarySwitch,
-	SuccessDangerSwitch,
-	SuccessSwitch,
-	TertiarySwitch,
-	WarningSwitch
-};

lib/component/tab.ts

@@ -1,14 +0,0 @@
-import MattrixwvTab from "./tab/MattrixwvTab";
-import MattrixwvTabGroup from "./tab/MattrixwvTabGroup";
-import MattrixwvTabList from "./tab/MattrixwvTabList";
-import MattrixwvTabPanel from "./tab/MattrixwvTabPanel";
-import MattrixwvTabPanels from "./tab/MattrixwvTabPanels";
-
-
-export {
-	MattrixwvTab,
-	MattrixwvTabGroup,
-	MattrixwvTabList,
-	MattrixwvTabPanel,
-	MattrixwvTabPanels
-};

lib/component/tab/index.ts

@@ -0,0 +1,6 @@
+export { default as MattrixwvTab } from "./MattrixwvTab";
+export { default as MattrixwvTabGroup } from "./MattrixwvTabGroup";
+export { default as MattrixwvTabList } from "./MattrixwvTabList";
+export { default as MattrixwvTabPanel } from "./MattrixwvTabPanel";
+export { default as MattrixwvTabPanels } from "./MattrixwvTabPanels";
+

lib/component/theme.ts

@@ -1,8 +0,0 @@
-import ThemeProvider, { useTheme } from "$/providers/theme/ThemeProvider";
-
-
-export {
-	ThemeProvider,
-	useTheme
-};
-

lib/component/toaster.ts

@@ -1,10 +0,0 @@
-import Toaster from "$/component/toaster/Toaster";
-import ToasterProvider, { useToaster } from "$/providers/toaster/ToasterProvider";
-
-
-export {
-	Toaster,
-	ToasterProvider,
-	useToaster
-};
-

lib/component/toaster/index.ts

@@ -0,0 +1,3 @@
+export { default as ToasterProvider, useToaster } from "$/providers/toaster/ToasterProvider";
+export { default as Toaster } from "./Toaster";
+

lib/index.ts

@@ -1,14 +1,11 @@
 export * from "$/component/button";
-export * from "$/component/checkbox";
 export * from "$/component/input";
 export * from "$/component/loading";
 export * from "$/component/message";
 export * from "$/component/modal";
 export * from "$/component/nav";
 export * from "$/component/progress";
-export * from "$/component/radio";
-export * from "$/component/switch";
 export * from "$/component/tab";
-export * from "$/component/theme";
 export * from "$/component/toaster";
+export * from "$/providers/theme/theme";
 

lib/providers/theme/theme.ts

@@ -0,0 +1,2 @@
+export { default as ThemeProvider, useTheme } from "$/providers/theme/ThemeProvider";
+

lib/providers/toaster/ToasterProvider.tsx

@@ -1,7 +1,6 @@
 import { DangerMessageBlock, SuccessMessageBlock, WarningMessageBlock } from "$/component/message";
 import Toaster from "$/component/toaster/Toaster";
 import type { Toast, ToastProviderProps, ToastProviderState } from "$/types/ToasterTypes";
-import moment from "moment";
 import { createContext, useCallback, useContext, useMemo, useState } from "react";
 
 
@@ -27,7 +26,7 @@ export default function ToasterProvider({
 	const hideToast = useCallback(function hide(id: string){
 		setToast((prev) => {
 			if(prev.length === 1 && prev[0].id === id){
-				const current =  prev[0].hideTime > moment(new Date()).subtract(600, "ms").toDate() ? [...prev] : [];
+				const current =  prev[0].hideTime > new Date(Date.now() - 600) ? [...prev] : [];
 				if(current.length > 0){
 					setTimeout(() => hide(id), 600);
 				}
@@ -45,7 +44,7 @@ export default function ToasterProvider({
 		}
 		const id = crypto.randomUUID();
 
-		setToast((prev) => [ ...prev, { id, message, duration, hideTime: moment(new Date()).add(duration, "ms").toDate() } ]);
+		setToast((prev) => [ ...prev, { id, message, duration, hideTime: new Date(Date.now() + duration) } ]);
 		setTimeout(() => hideToast(id), duration);
 
 		return id;

lib/types/InputTypes.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ChangeEventHandler } from "react";
+import type { ChangeEventHandler, InputHTMLAttributes } from "react";
 
 
 export interface TextInputProps {
@@ -164,10 +164,8 @@ export interface RadioListProps {
 }
 
 
-export interface DateInputProps {
-	id?: string;
-	className?: string;
-	defaultValue?: Date;
-	value?: Date;
-	onChange?: (newValue: Date) => void;
+export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "step">{
+	step?: number;
+	value: Date | undefined;
+	onChange: (newValue: Date | undefined) => void;
 }

lib/util/FileUtil.ts

@@ -5,5 +5,5 @@ export function humanReadableBytes(bytes: number, decimals: number = 2): string{
 
 	const sizes = [ "Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB" ];
 	const power = Math.floor(Math.log(bytes) / Math.log(1024));
-	return `${parseFloat((bytes / Math.pow(1024, power)).toFixed(decimals))} ${sizes[power]}`;
+	return `${Number.parseFloat((bytes / Math.pow(1024, power)).toFixed(decimals))} ${sizes[power]}`;
 }

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "mattrixwv-components",
-	"version": "0.0.7",
+	"version": "0.0.8",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "mattrixwv-components",
-			"version": "0.0.7",
+			"version": "0.0.8",
 			"devDependencies": {
 				"@eslint/js": "^9.39.2",
 				"@tailwindcss/vite": "^4.1.18",
@@ -34,12 +34,12 @@
 				"typescript-eslint": "^8.50.0",
 				"vite": "^7.3.0",
 				"vite-plugin-dts": "^4.5.4",
+				"vite-plugin-static-copy": "^3.2.0",
 				"vitest": "^4.0.16"
 			},
 			"peerDependencies": {
 				"@headlessui/react": "^2.2.9",
 				"clsx": "^2.1.1",
-				"moment": "^2.30.1",
 				"react": "^19.2.3",
 				"react-dom": "^19.2.3",
 				"react-icons": "^5.5.0"
@@ -6980,16 +6980,6 @@
 				"pathe": "^2.0.1"
 			}
 		},
-		"node_modules/moment": {
-			"version": "2.30.1",
-			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
-			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
-			"license": "MIT",
-			"peer": true,
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/ms": {
 			"version": "2.1.3",
 			"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -7234,6 +7224,19 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
+		"node_modules/p-map": {
+			"version": "7.0.4",
+			"resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz",
+			"integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=18"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/sindresorhus"
+			}
+		},
 		"node_modules/parent-module": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -8843,6 +8846,29 @@
 				}
 			}
 		},
+		"node_modules/vite-plugin-static-copy": {
+			"version": "3.2.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.2.0.tgz",
+			"integrity": "sha512-g2k9z8B/1Bx7D4wnFjPLx9dyYGrqWMLTpwTtPHhcU+ElNZP2O4+4OsyaficiDClus0dzVhdGvoGFYMJxoXZ12Q==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"chokidar": "^3.6.0",
+				"p-map": "^7.0.4",
+				"picocolors": "^1.1.1",
+				"tinyglobby": "^0.2.15"
+			},
+			"engines": {
+				"node": "^18.0.0 || >=20.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/sapphi-red"
+			},
+			"peerDependencies": {
+				"vite": "^5.0.0 || ^6.0.0 || ^7.0.0"
+			}
+		},
 		"node_modules/vite/node_modules/@esbuild/aix-ppc64": {
 			"version": "0.27.2",
 			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz",

package.json

@@ -5,7 +5,8 @@
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
-		"build": "eslint . && tsc -b && vite build",
+		"build": "eslint . && vitest run && tsc -b && vite build",
+		"build:fast": "tsc -b && vite build",
 		"lint": "eslint .",
 		"test": "vitest run",
 		"test:watch": "vitest",
@@ -20,7 +21,6 @@
 	"peerDependencies": {
 		"@headlessui/react": "^2.2.9",
 		"clsx": "^2.1.1",
-		"moment": "^2.30.1",
 		"react": "^19.2.3",
 		"react-dom": "^19.2.3",
 		"react-icons": "^5.5.0"
@@ -52,6 +52,7 @@
 		"typescript-eslint": "^8.50.0",
 		"vite": "^7.3.0",
 		"vite-plugin-dts": "^4.5.4",
+		"vite-plugin-static-copy": "^3.2.0",
 		"vitest": "^4.0.16"
 	},
 	"overrides": {
@@ -72,8 +73,43 @@
 	"exports": {
 		".": {
 			"types": "./dist/mattrixwv-components.d.ts",
-			"require": "./dist/mattrixwv-components.cjs",
 			"import": "./dist/mattrixwv-components.js"
+		},
+		"./button": {
+			"types": "./dist/button.d.ts",
+			"import": "./dist/button.js"
+		},
+		"./input": {
+			"types": "./dist/input.d.ts",
+			"import": "./dist/input.js"
+		},
+		"./loading": {
+			"types": "./dist/loading.d.ts",
+			"import": "./dist/loading.js"
+		},
+		"./message": {
+			"types": "./dist/message.d.ts",
+			"import": "./dist/message.js"
+		},
+		"./modal": {
+			"types": "./dist/modal.d.ts",
+			"import": "./dist/modal.js"
+		},
+		"./nav": {
+			"types": "./dist/nav.d.ts",
+			"import": "./dist/nav.js"
+		},
+		"./progress": {
+			"types": "./dist/progress.d.ts",
+			"import": "./dist/progress.js"
+		},
+		"./tab": {
+			"types": "./dist/tab.d.ts",
+			"import": "./dist/tab.js"
+		},
+		"./toaster": {
+			"types": "./dist/toaster.d.ts",
+			"import": "./dist/toaster.js"
 		}
 	},
 	"files": [