Update drag and drop hover classes

README.md

@@ -1 +1,5 @@
+# Mattrixwv React Components
+
+[![Quality Gate Status](https://sonarqube.mattrixwv.com/api/project_badges/measure?project=MattrixwvReactComponents&metric=alert_status&token=sqb_e8b5362c32319b0612536e683cdbe2a77ec5bb32)](https://sonarqube.mattrixwv.com/dashboard?id=MattrixwvReactComponents)
+
 Under Construction

lib/component/input/file/DragAndDropFileInput.tsx

@@ -27,12 +27,15 @@ export default function DragAndDropFileInput({
 		<label
 			className={clsx(
 				"flex flex-col items-center justify-center border-2 rounded-lg cursor-pointer",
-				//TODO: Make hover classes
+				"data-drag:border-primary data-drag:text-primary",
 				className
 			)}
-			onDragOver={(e) => e.preventDefault()}
+			onDragOver={(e) => { e.preventDefault(); e.currentTarget.dataset.drag = "true"; }}
+			onDragLeave={(e) => { e.preventDefault(); delete e.currentTarget.dataset.drag; }}
 			onDrop={(e) => {
 				e.preventDefault();
+				delete e.currentTarget.dataset.drag;
+
 				const currentFile = e.dataTransfer.files[0];
 				setFile(currentFile);
 

lib/component/loading/various/Wifi.tsx

@@ -1,4 +1,5 @@
 import type { LoadingWifiProps } from "$/types/LoadingTypes";
+import { useId } from "react";
 
 
 export default function Wifi({
@@ -9,9 +10,9 @@ export default function Wifi({
 	fadeDuration = 0.001,
 	stroke,
 	fill
-}: LoadingWifiProps){
+}: Readonly<LoadingWifiProps>){
 	//https://github.com/n3r4zzurr0/svg-spinners/blob/main/svg-smil/wifi.svg
-	const id = crypto.randomUUID().replaceAll("-", "");
+	const id = useId();
 
 
 	return (

lib/component/modal/Modal.tsx

@@ -3,17 +3,14 @@ import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
 import clsx from "clsx";
 
 
-export default function Modal(props: ModalProps){
+export default function Modal({
-	const {
 	display,
 	onClose,
 	className,
 	backgroundType = "blur",
 	top,
 	children
-	} = props;
+}: Readonly<ModalProps>){
-
-
 	return (
 		<Dialog
 			open={display}

lib/component/modal/ModalBody.tsx

@@ -2,19 +2,18 @@ import type { ModalBodyProps } from "$/types/ModalTypes";
 import clsx from "clsx";
 
 
-export default function ModalBody(props: ModalBodyProps){
+export default function ModalBody({
-	const {
 	className,
-		children
+	children,
-	} = props;
+	...props
-
+}: Readonly<ModalBodyProps>){
-
 	return (
 		<div
 			className={clsx(
 				"flex flex-col items-center justify-start h-full w-full overflow-scroll",
 				className
 			)}
+			{...props}
 		>
 			{children}
 		</div>

lib/component/modal/ModalFooter.tsx

@@ -2,19 +2,18 @@ import type { ModalFooterProps } from "$/types/ModalTypes";
 import clsx from "clsx";
 
 
-export default function ModalFooter(props: ModalFooterProps){
+export default function ModalFooter({
-	const {
 	className,
-		children
+	children,
-	} = props;
+	...props
-
+}: Readonly<ModalFooterProps>){
-
 	return (
 		<div
 			className={clsx(
 				"flex flex-row items-center justify-center w-full rounded-b-lg",
 				className
 			)}
+			{...props}
 		>
 			<div
 				className="flex flex-row items-center justify-center mx-8 my-3"

lib/component/modal/ModalHeader.tsx

@@ -1,23 +1,23 @@
+import Button from "$/component/button/Button";
 import type { ModalHeaderProps } from "$/types/ModalTypes";
 import { DialogTitle } from "@headlessui/react";
 import clsx from "clsx";
 import { BsXLg } from "react-icons/bs";
 
 
-export default function ModalHeader(props: ModalHeaderProps){
+export default function ModalHeader({
-	const {
 	onClose,
 	className,
-		children
+	children,
-	} = props;
+	...props
-
+}: Readonly<ModalHeaderProps>){
-
 	return (
 		<div
 			className={clsx(
 				"flex flex-row items-center justify-center w-full rounded-t-lg",
 				className
 			)}
+			{...props}
 		>
 			<DialogTitle
 				as="div"
@@ -27,14 +27,14 @@ export default function ModalHeader(props: ModalHeaderProps){
 			</DialogTitle>
 			{
 				onClose &&
-				<div
+				<Button
 					className="absolute top-1 right-1 cursor-pointer"
 					onClick={onClose}
 				>
 					<BsXLg
 						size={20}
 					/>
-				</div>
+				</Button>
 			}
 		</div>
 	);

lib/component/nav/DarkModeSwitch.tsx

@@ -8,7 +8,7 @@ export default function DarkModeSwitch(){
 
 	const updateTheme = () => {
 		if(theme === "system"){
-			if(window.document.documentElement.classList.contains("dark")){
+			if(globalThis.document.documentElement.classList.contains("dark")){
 				setTheme("light");
 			}
 			else{

lib/component/nav/NavBar.tsx

@@ -2,13 +2,11 @@ import type { NavBarProps } from "$/types/NavTypes";
 import clsx from "clsx";
 
 
-export default function NavBar(props: NavBarProps){
+export default function NavBar({
-	const {
 	className,
-		children
+	children,
-	} = props;
+	...props
-
+}: Readonly<NavBarProps>){
-
 	return (
 		<nav
 			className={clsx(
@@ -16,6 +14,7 @@ export default function NavBar(props: NavBarProps){
 				"fixed top-0 left-0 w-full z-10",
 				"flex flex-row flex-nowrap items-center justify-center"
 			)}
+			{...props}
 		>
 			{children}
 		</nav>

lib/component/nav/PopoverMenu.tsx

@@ -3,14 +3,11 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import clsx from "clsx";
 import { RiArrowRightSLine } from "react-icons/ri";
 
-export default function PopoverMenu(props: PopoverMenuProps){
+export default function PopoverMenu({
-	const {
 	buttonContent,
 	anchor,
 	children
-	} = props;
+}: Readonly<PopoverMenuProps>){
-
-
 	return (
 		<Popover>
 			<PopoverButton

lib/component/tab/MattrixwvTab.tsx

@@ -3,12 +3,9 @@ import { Tab } from "@headlessui/react";
 import clsx from "clsx";
 
 
-export default function MattrixwvTab(props: MattrixwvTabProps){
+export default function MattrixwvTab({
-	const {
 	children
-	} = props;
+}: Readonly<MattrixwvTabProps>){
-
-
 	return (
 		<Tab
 			className={clsx(

lib/component/tab/MattrixwvTabGroup.tsx

@@ -7,13 +7,10 @@ import MattrixwvTabPanel from "./MattrixwvTabPanel";
 import MattrixwvTabPanels from "./MattrixwvTabPanels";
 
 
-export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
+export default function MattrixwvTabGroup({
-	const {
 	tabs,
 	className
-	} = props;
+}: Readonly<MattrixwvTabGroupProps>){
-
-
 	return (
 		<TabGroup
 			className={clsx(
@@ -24,9 +21,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
 			<MattrixwvTabList>
 				{
 					tabs.map((tab, index) => (
-						<MattrixwvTab
+						<MattrixwvTab key={index}>
-							key={index}
-						>
 							{tab.tab}
 						</MattrixwvTab>
 					))
@@ -35,9 +30,7 @@ export default function MattrixwvTabGroup(props: MattrixwvTabGroupProps){
 			<MattrixwvTabPanels>
 				{
 					tabs.map((tab, index) => (
-						<MattrixwvTabPanel
+						<MattrixwvTabPanel key={index}>
-							key={index}
-						>
 							{tab.content}
 						</MattrixwvTabPanel>
 					))

lib/component/tab/MattrixwvTabList.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabListProps } from "$/types/TabTypes";
 import { TabList } from "@headlessui/react";
 
 
-export default function MattrixwvTabList(props: MattrixwvTabListProps){
+export default function MattrixwvTabList({
-	const {
 	children
-	} = props;
+}: Readonly<MattrixwvTabListProps>){
-
-
 	return (
-		<TabList
+		<TabList className="flex flex-row items-center justify-start w-full border-b">
-			className="flex flex-row items-center justify-start w-full border-b"
-		>
 			{children}
 		</TabList>
 	);

lib/component/tab/MattrixwvTabPanel.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelProps } from "$/types/TabTypes";
 import { TabPanel } from "@headlessui/react";
 
 
-export default function MattrixwvTabPanel(props: MattrixwvTabPanelProps){
+export default function MattrixwvTabPanel({
-	const {
 	children
-	} = props;
+}: Readonly<MattrixwvTabPanelProps>){
-
-
 	return (
-		<TabPanel
+		<TabPanel className="flex flex-row items-start justify-center w-full h-full">
-			className="flex flex-row items-start justify-center w-full h-full"
-		>
 			{children}
 		</TabPanel>
 	);

lib/component/tab/MattrixwvTabPanels.tsx

@@ -2,16 +2,11 @@ import type { MattrixwvTabPanelsProps } from "$/types/TabTypes";
 import { TabPanels } from "@headlessui/react";
 
 
-export default function MattrixwvTabPanels(props: MattrixwvTabPanelsProps){
+export default function MattrixwvTabPanels({
-	const {
 	children
-	} = props;
+}: Readonly<MattrixwvTabPanelsProps>){
-
-
 	return (
-		<TabPanels
+		<TabPanels className="flex flex-row items-start justify-center w-full h-full overflow-scroll">
-			className="flex flex-row items-start justify-center w-full h-full overflow-scroll"
-		>
 			{children}
 		</TabPanels>
 	);

lib/component/toaster/Toaster.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx";
 export default function Toaster({
 	toast,
 	className
-}: ToasterProps){
+}: Readonly<ToasterProps>){
 	return (
 		<Transition
 			show={toast.length > 1 || (toast.length === 1 && toast[0].hideTime > new Date())}

lib/providers/theme/ThemeProvider.tsx

@@ -10,7 +10,7 @@ const themeInitialState: ThemeProviderState = {
 const ThemeProviderContext = createContext<ThemeProviderState>(themeInitialState);
 
 
-export default function ThemeProvider(props: ThemeProviderProps){
+export default function ThemeProvider(props: Readonly<ThemeProviderProps>){
 	const {
 		children,
 		defaultTheme = "system",
@@ -20,12 +20,12 @@ export default function ThemeProvider(props: ThemeProviderProps){
 	const [ theme, setTheme ] = useState<Theme>((localStorage.getItem(storageKey) as Theme) || defaultTheme);
 
 	useEffect(() => {
-		const root = window.document.documentElement;
+		const root = globalThis.document.documentElement;
 
 		root.classList.remove("light", "dark");
 
 		if(theme === "system"){
-			const systemTheme = window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+			const systemTheme = globalThis.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 
 			root.classList.add(systemTheme);
 		}

lib/providers/toaster/ToasterProvider.tsx

@@ -19,7 +19,7 @@ const ToasterProviderContext = createContext<ToastProviderState>(toastInitialSta
 export default function ToasterProvider({
 	className,
 	children
-}: ToastProviderProps){
+}: Readonly<ToastProviderProps>){
 	const [ toast, setToast ] = useState<Toast[]>([]);
 
 

lib/types/ButtonTypes.ts

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes } from "react";
+import type { ComponentProps } from "react";
 
 
 export type ButtonRounding = "none" | "sm" | "md" | "lg" | "full";
@@ -7,7 +7,7 @@ export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
 export type ButtonVariant = "standard" | "outline" | "ghost" | "outline-ghost" | "icon";
 
 
-export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "size" | "type"> {
+export interface ButtonProps extends Omit<ComponentProps<"button">, "size" | "type"> {
 	type?: "button" | "submit" | "reset";
 	rounding?: ButtonRounding;
 	shape?: ButtonShape;

lib/types/InputTypes.ts

@@ -1,5 +1,5 @@
 import type React from "react";
-import type { ChangeEventHandler, InputHTMLAttributes } from "react";
+import type { ChangeEventHandler, ComponentProps } from "react";
 
 
 export interface TextInputProps {
@@ -167,7 +167,7 @@ export interface RadioListProps {
 }
 
 
-export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "step">{
+export interface DateInputProps extends Omit<ComponentProps<"input">, "value" | "onChange" | "step">{
 	step?: number;
 	value: Date | undefined;
 	onChange: (newValue: Date | undefined) => void;

lib/types/MessageTypes.ts

@@ -1,7 +1,7 @@
-import type { HTMLProps } from "react";
+import type { ComponentProps } from "react";
 
 
-export interface MessageBlockProps extends HTMLProps<HTMLDivElement> {
+export interface MessageBlockProps extends ComponentProps<"div"> {
 	outline?: "none" | "sm" | "md" | "lg";
 	rounded?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
 }

lib/types/ModalTypes.ts

@@ -1,18 +1,21 @@
+import type { ComponentProps } from "react";
+
+
 export type ModalBackgroundType = "darken" | "lighten" | "blur" | "darken-blur" | "lighten-blur" | "darken-blur-radial" | "lighten-blur-radial" | "transparent" | "none";
 
 
-export interface ModalHeaderProps {
+export interface ModalHeaderProps extends ComponentProps<"div"> {
 	onClose?: () => void;
 	className?: string;
 	children: React.ReactNode;
 }
 
-export interface ModalFooterProps {
+export interface ModalFooterProps extends ComponentProps<"div"> {
 	className?: string;
 	children: React.ReactNode;
 }
 
-export interface ModalBodyProps {
+export interface ModalBodyProps extends ComponentProps<"div"> {
 	className?: string;
 	children: React.ReactNode;
 }

lib/types/NavTypes.ts

@@ -1,3 +1,6 @@
+import type { ComponentProps } from "react";
+
+
 export type Align = "start" | "end";
 export type Placement = "top" | "bottom" | "left" | "right";
 export type AnchorTo = `${Placement}` | `${Placement} ${Align}`;
@@ -9,7 +12,7 @@ export interface PopoverMenuProps {
 	children: React.ReactNode;
 }
 
-export interface NavBarProps {
+export interface NavBarProps extends ComponentProps<"nav"> {
 	className?: string;
 	children: React.ReactNode;
 }

src/routes/buttons/index.tsx

@@ -120,10 +120,10 @@ function generateTabContent(Fn: (props: ButtonProps) => JSX.Element, onClick: ()
 function ButtonDisplay({
 	title,
 	children
-}:{
+}: Readonly<{
 	title: React.ReactNode;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center gap-y-2"

src/routes/modal/index.tsx

@@ -77,10 +77,10 @@ function ModalPage(){
 function DemoCenteredModal({
 	display,
 	onClose
-}:{
+}: Readonly<{
 	display: boolean;
 	onClose: () => void;
-}){
+}>){
 	return (
 		<Modal
 			display={display}
@@ -97,10 +97,10 @@ function DemoCenteredModal({
 function DemoTopModal({
 	display,
 	onClose
-}:{
+}: Readonly<{
 	display: boolean;
 	onClose: () => void;
-}){
+}>){
 	return (
 		<Modal
 			display={display}

src/routes/progress/index.tsx

@@ -128,13 +128,13 @@ function ProgressPage() {
 function ProgressBlock({
 	label,
 	children
-}:{
+}: Readonly<{
 	label: string;
 	children: React.ReactNode;
-}){
+}>){
 	return (
 		<div
-			className="flex flex-col items-center justify-center w-128 gap-y-2"
+			className="flex flex-col items-center justify-center w-lg gap-y-2"
 		>
 			<h3
 				className="font-bold text-2xl"

src/util/InputUtils.tsx

@@ -579,13 +579,13 @@ export function TextContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<TextDisplay title="Text Input">
+			<GeneralInputDisplay title="Text Input">
 				<TextInput placeholder="Text Input" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
-			</TextDisplay>
+			</GeneralInputDisplay>
-			<TextDisplay title="Text Area">
+			<GeneralInputDisplay title="Text Area">
 				<TextArea placeholder="Textarea" className="resize" labelClassName="bg-(--bg-color) peer-focus:bg-(--bg-color)"/>
-			</TextDisplay>
+			</GeneralInputDisplay>
-			<TextDisplay title="Select">
+			<GeneralInputDisplay title="Select">
 				<SelectInput placeholder={selected.label} onChange={(newValue) => setSelected(selectOptions.find((option) => option.value === newValue) || selectOptions[0])}>
 					{
 						selectOptions.map((option) => (
@@ -599,8 +599,8 @@ export function TextContent(){
 						))
 					}
 				</SelectInput>
-			</TextDisplay>
+			</GeneralInputDisplay>
-			<TextDisplay
+			<GeneralInputDisplay
 				title="Number Input"
 			>
 				<NumberInput
@@ -610,9 +610,9 @@ export function TextContent(){
 				>
 					Number Test
 				</NumberInput>
-			</TextDisplay>
+			</GeneralInputDisplay>
 			{/* */
-			<TextDisplay
+			<GeneralInputDisplay
 				title="Number Slider"
 			>
 				<NumberSlider
@@ -621,13 +621,13 @@ export function TextContent(){
 					value={numberValue}
 					onChange={setNumberValue}
 				/>
-			</TextDisplay>
+			</GeneralInputDisplay>
 			/* */}
 		</div>
 	);
 }
 
-function TextDisplay({
+function GeneralInputDisplay({
 	title,
 	children
 }:Readonly<{
@@ -649,13 +649,13 @@ export function FileContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<FileDisplay title="File Input">
+			<GeneralInputDisplay title="File Input">
 				<FileInput
 					showFileName={true}
 					showSize={true}
 				/>
-			</FileDisplay>
+			</GeneralInputDisplay>
-			<FileDisplay title="Drag and Drop File Input">
+			<GeneralInputDisplay title="Drag and Drop File Input">
 				<DragAndDropFileInput
 					showFileName={true}
 					showSize={true}
@@ -664,24 +664,7 @@ export function FileContent(){
 				>
 					Drag And Drop File Input
 				</DragAndDropFileInput>
-			</FileDisplay>
+			</GeneralInputDisplay>
-		</div>
-	);
-}
-
-function FileDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
 		</div>
 	);
 }
@@ -691,7 +674,7 @@ export function CheckboxContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<CheckboxDisplay title="Checkbox">
+			<GeneralInputDisplay title="Checkbox">
 				<div className="flex flex-row items-center justify-center gap-x-8">
 					<MattrixwvCheckbox className="group-data-checked:stroke-white group-data-checked:bg-amber-400" defaultChecked={true}>Default</MattrixwvCheckbox>
 					<PrimaryCheckbox defaultChecked={true} >Primary</PrimaryCheckbox>
@@ -705,8 +688,8 @@ export function CheckboxContent(){
 					<LightCheckbox defaultChecked={true}>Light</LightCheckbox>
 					<DarkCheckbox defaultChecked={true}>Dark</DarkCheckbox>
 				</div>
-			</CheckboxDisplay>
+			</GeneralInputDisplay>
-			<CheckboxDisplay title="Checks">
+			<GeneralInputDisplay title="Checks">
 				<div className="flex flex-row items-center justify-center gap-x-8">
 					<MattrixwvCheckbox className="group-data-checked:stroke-amber-400" defaultChecked={true} showBox={false}>Default</MattrixwvCheckbox>
 					<PrimaryCheckbox defaultChecked={true} showBox={false}>Primary</PrimaryCheckbox>
@@ -720,24 +703,7 @@ export function CheckboxContent(){
 					<LightCheckbox defaultChecked={true} showBox={false}>Light</LightCheckbox>
 					<DarkCheckbox defaultChecked={true} showBox={false}>Dark</DarkCheckbox>
 				</div>
-			</CheckboxDisplay>
+			</GeneralInputDisplay>
-		</div>
-	);
-}
-
-function CheckboxDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
 		</div>
 	);
 }
@@ -747,7 +713,7 @@ export function RadioContent(){
 		<div
 			className="flex flex-col items-center justify-center gap-y-8 mt-8 w-full"
 		>
-			<RadioDisplay title="Sizes">
+			<GeneralInputDisplay title="Sizes">
 				<RadioList
 				>
 					<PrimaryRadioButton size="xs" value="xs">Extra Small</PrimaryRadioButton>
@@ -756,8 +722,8 @@ export function RadioContent(){
 					<PrimaryRadioButton size="lg" value="lg">Large</PrimaryRadioButton>
 					<PrimaryRadioButton size="xl" value="xl">Extra Large</PrimaryRadioButton>
 				</RadioList>
-			</RadioDisplay>
+			</GeneralInputDisplay>
-			<RadioDisplay title="Radio Checked">
+			<GeneralInputDisplay title="Radio Checked">
 				<div
 					className="flex flex-row items-center justify-center gap-x-8"
 				>
@@ -772,8 +738,8 @@ export function RadioContent(){
 					<RadioList value="Light"><LightRadioButton value="Light">Light</LightRadioButton></RadioList>
 					<RadioList value="Dark"><DarkRadioButton value="Dark">Dark</DarkRadioButton></RadioList>
 				</div>
-			</RadioDisplay>
+			</GeneralInputDisplay>
-			<RadioDisplay title="Radio Horizontal">
+			<GeneralInputDisplay title="Radio Horizontal">
 				<RadioList
 					direction="horizontal"
 				>
@@ -789,8 +755,8 @@ export function RadioContent(){
 					<LightRadioButton value="light">Light</LightRadioButton>
 					<DarkRadioButton value="dark">Dark</DarkRadioButton>
 				</RadioList>
-			</RadioDisplay>
+			</GeneralInputDisplay>
-			<RadioDisplay title="Radio Vertical">
+			<GeneralInputDisplay title="Radio Vertical">
 				<RadioList
 					direction="vertical"
 				>
@@ -806,24 +772,7 @@ export function RadioContent(){
 					<LightRadioButton value="light">Light</LightRadioButton>
 					<DarkRadioButton value="dark">Dark</DarkRadioButton>
 				</RadioList>
-			</RadioDisplay>
+			</GeneralInputDisplay>
-		</div>
-	);
-}
-
-function RadioDisplay({
-	title,
-	children
-}:Readonly<{
-	title: React.ReactNode;
-	children: React.ReactNode;
-}>){
-	return (
-		<div
-			className="flex flex-col items-center justify-center gap-y-2 w-full"
-		>
-			<h2 className="text-2xl">{title}</h2>
-			{children}
 		</div>
 	);
 }

src/util/LoadingUtils.tsx

@@ -47,10 +47,10 @@ import type { JSX } from "react";
 function LoadingGroup({
 	label,
 	elements
-}:{
+}: Readonly<{
 	label: React.ReactNode;
 	elements: JSX.Element[];
-}){
+}>){
 	return (
 		<div
 			className="flex flex-col items-center justify-center"