Update input components

lib/component/input/text/OptionInput.tsx

@@ -3,15 +3,13 @@ import { ListboxOption } from "@headlessui/react";
 import clsx from "clsx";
 
 
-export default function OptionInput(props: OptionInputProps){
-	const {
-		id,
-		className,
-		value,
-		children
-	} = props;
-
-
+export default function OptionInput({
+	id,
+	className,
+	value,
+	disabled,
+	children
+}: Readonly<OptionInputProps>){
 	return (
 		<ListboxOption
 			id={id}
@@ -20,6 +18,7 @@ export default function OptionInput(props: OptionInputProps){
 				className
 			)}
 			value={value}
+			disabled={disabled}
 		>
 			{children}
 		</ListboxOption>

lib/component/input/text/SelectInput.tsx

@@ -4,28 +4,28 @@ import clsx from "clsx";
 import { BsChevronDown } from "react-icons/bs";
 
 
-export default function SelectInput(props: SelectInputProps){
-	const {
-		label,
-		value,
-		onChange,
-		children
-	} = props;
-
-
+export default function SelectInput({
+	placeholder,
+	value,
+	onChange,
+	disabled,
+	children
+}: Readonly<SelectInputProps>){
 	return (
 		<Listbox
 			value={value}
 			onChange={onChange}
+			disabled={disabled}
 		>
 			<ListboxButton
 				className={clsx(
 					"group relative flex flex-row items-center justify-between w-full",
-					"border-2 px-2 py-1 rounded-lg"
+					"border-2 px-2 py-1 rounded-lg",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
 					//"not-data-open:rounded-lg data-open:rounded-t-lg"
 				)}
 			>
-				<span>{label}</span>
+				<span>{placeholder}</span>
 				<span className="block group-data-open:rotate-180 transition-transform duration-250"><BsChevronDown size={22}/></span>
 			</ListboxButton>
 			<ListboxOptions

lib/component/input/text/TextArea.tsx

@@ -1,23 +1,27 @@
 import type { TextAreaProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextArea({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
 	name,
 	maxLength,
-	rows,
+	rows = 3,
 	cols,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextAreaProps){
+}: Readonly<TextAreaProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -29,7 +33,7 @@ export default function TextArea({
 				className="relative flex flex-row items-center justify-center px-2 py-1 w-full"
 			>
 				<textarea
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -39,7 +43,6 @@ export default function TextArea({
 					maxLength={maxLength}
 					rows={rows}
 					cols={cols}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -54,7 +57,7 @@ export default function TextArea({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>

lib/component/input/text/TextInput.tsx

@@ -1,9 +1,10 @@
 import type { TextInputProps } from "$/types/InputTypes";
 import clsx from "clsx";
+import { useId } from "react";
 
 
 export default function TextInput({
-	id = crypto.randomUUID().replaceAll("-", ""),
+	id,
 	className,
 	inputClassName,
 	labelClassName,
@@ -11,11 +12,14 @@ export default function TextInput({
 	maxLength,
 	spellCheck,
 	placeholder,
-	defaultValue,
 	value,
 	onChange,
 	disabled
-}: TextInputProps){
+}: Readonly<TextInputProps>){
+	const componentId = useId();
+	const activeId = id ?? componentId;
+
+
 	return (
 		<div
 			className={clsx(
@@ -28,7 +32,7 @@ export default function TextInput({
 			>
 				<input
 					type="text"
-					id={id}
+					id={activeId}
 					className={clsx(
 						"peer bg-transparent outline-none placeholder-transparent w-full",
 						inputClassName
@@ -36,7 +40,6 @@ export default function TextInput({
 					name={name}
 					placeholder={placeholder}
 					maxLength={maxLength}
-					defaultValue={defaultValue}
 					value={value}
 					onChange={onChange}
 					disabled={disabled}
@@ -51,7 +54,7 @@ export default function TextInput({
 						labelClassName
 					)}
 					style={{ transitionProperty: "top, left, font-size, line-height", transitionTimingFunction: "cubic-bezier(0.4 0, 0.2, 1)", transitionDuration: "250ms" }}
-					htmlFor={id}
+					htmlFor={activeId}
 				>
 					{placeholder}
 				</label>