Update radio buttons

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;